Если input пустой то показать картинку?

Question

[Alibek Kulseitov]

Есть у меня код. Если инпут пустой и пользователь пытается нажать кнопку (отправить)
То валидатор добавляет класс .red
input.red, {
border: 1px solid red;
transition: all 0.5s ease;
}

Как теперь добавить к этому еще чтобы какая-то картинка выходила?
У меня есть картинка и она должна выходить у всех инпутов. То есть надо учитывать что инпуты на сайте, разной ширины. Получается какой бы ширины не был инпут, картинка всегда появляется в справа сверху от инпута.

Answer 1

[Иван]

CSS:
.red{background: src();}
либо

input img{display: none;}
input.red img{display: block;}

А положение регулируется свойством position.

Comments

[Сергей delphinpro]

>> input.red img{display: block;}
вообще-то элемент input не может содержать дочерних элементов, а значит и дочерний селектор не подходит в принципе.

можно написать (сестринский селектор)

<input>
<img>

img { display: none;}
input.red + img {display: block}

а можно доработать валидатор, чтобы он сам показывал картинку.

[Иван]

Сергей: ну тогда использовать врапер.

Answer 2

[rhost]

Если я правильно понял
codepen.io/anon/pen/RPjxGQ