Соответствие пустого поля ввода с помощью CSS

Question

Как применить стиль к пустому ящику ввода? Если пользователь вводит что-то в поле ввода, стиль больше не должен применяться. Возможно ли это в CSS? Я пробовал:

input[value=""] 

Answer 1

В CSS нет селектора, который делает это. Селекторы атрибутов соответствуют значениям атрибутов, а не вычисленным значениям.

Вам необходимо использовать JavaScript.

Answer 2

input[value=""] не будет работать с

<input type="text" /> 

но работал для меня в хроме с

<input type="text" value="" /> 

Но стиль не изменится, как только кто-то начнет печатать. Поэтому вы должны использовать js для этого.

Answer 3

Если только поле required вы могли бы пойти с input:valid

#foo-thing:valid + .msg { visibility: visible!important; } 

<input type="text" id="foo-thing" required="required"> 
 
<span class="msg" style="visibility: hidden;">Yay not empty</span>

live on jsFiddle См

или нивелировать с помощью #foo-thing:invalid (кредита до @SamGoody)

Answer 4

$('input#edit-keys-1').blur(function(){ 
    tmpval = $(this).val(); 
    if(tmpval == '') { 
     $(this).addClass('empty'); 
     $(this).removeClass('not-empty'); 
    } else { 
     $(this).addClass('not-empty'); 
     $(this).removeClass('empty'); 
    } 
}); 

в jQuery. Я добавил класс и создал css.

.empty { background:none; } 

Answer 5

Я задавался ответами у нас есть четкий признак, чтобы получить пустые поля ввода, посмотрите на этот код

/*empty input*/ 
input:empty{ 
    border-color: red; 
} 
/*input with value*/ 
input:not(:empty){ 
    border-color: black; 
} 

UPDATE

input, select, textarea { 
    border-color: @green; 
    &:empty { 
     border-color: @red; 
    } 
} 

Более для хорошего взгляда в валидации

Answer 6

Обновление значения поля не обновляет свой атрибут значения в DOM, поэтому ваш селектор всегда соответствует полю, даже если он фактически не пуст.

Вместо этого используйте invalid pseudo-class, чтобы достичь того, чего вы хотите, например, так:

input:required { 
 
    border: 1px solid green; 
 
} 
 
input:required:invalid { 
 
    border: 1px solid red; 
 
}

<input required type="text" value=""> 
 

 
<input required type="text" value="Value">

Answer 7

Если поддерживать устаревшие версии браузеров не требуется, вы можете использовать комбинацию required, valid и invalid ,

Хорошая вещь об использовании это valid и invalid Псевдоэлементы хорошо работают с атрибутами типа полей ввода.Например:

input:invalid, textarea:invalid { 
 
    box-shadow: 0 0 5px #d45252; 
 
    border-color: #b03535 
 
} 
 

 
input:valid, textarea:valid { 
 
    box-shadow: 0 0 5px #5cd053; 
 
    border-color: #28921f; 
 
}

<input type="email" name="email" placeholder="john_doe@example.com" required /> 
 
<input type="url" name="website" placeholder="http://johndoe.com"/> 
 
<input type="text" name="name" placeholder="John Doe" required/>

Для справки, JSFiddle здесь: http://jsfiddle.net/0sf6m46j/

Answer 8

В современных браузерах вы можете использовать :placeholder-shown целевой пустой ввод (не следует путать с ::placeholder).

input:placeholder-shown { 
    border: 1px solid red; /* Red border only if the input is empty */ 
} 

Больше информации и Поддержка браузера: https://css-tricks.com/almanac/selectors/p/placeholder-shown/

Answer 9

Это работает для меня:

HTML: - добавить необходимый атрибут для элемента ввода

<input class="my-input-element" type="text" placeholder="" required /> 

CSS: - использование: недействительный селектор

input.my-input-element:invalid { 

} 

Примечания:

• значение входного элемента не требуется.
• О необходимости от w3Schools.com, «При наличии, оно указывает, что поле ввода должно быть заполнено перед отправкой формы».

Answer 10

Этот вопрос, возможно, был предложен некоторое время назад, но, как я недавно приземлился на эту тему в поисках проверки формы на стороне клиента, а также :placeholder-shownsupport становятся лучше, я думал, что следующее может помочь другим.

Использование Berend идеи использования этого псевдо-класса CSS4, я смог создать проверку формы, только после того, как пользователь закончил ее заполнение.

Вот ademo и объяснение CodePen: https://codepen.io/johanmouchet/pen/PKNxKQ