Соответствие пустому полю ввода с использованием CSS

Question

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

input[value=""]

Answer 1

Если только поле имеет значение 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>

См. в прямом эфире на jsFiddle

ИЛИ отрицать, используя #foo-thing:invalid (кредит @SamGoody)

Answer 2

В современных браузерах вы можете использовать :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 3

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

Вы должны будете использовать JavaScript.

Answer 4

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

Вместо этого используйте invalid псевдокласс для достижения желаемого, например:

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 5

input[value=""], input:not([value])

работает с:

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

Но стиль не изменится, как только кто-то начнет печатать (для этого нужен JS).

Answer 6

Если поддержка устаревших браузеров не требуется, вы можете использовать комбинацию 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 7

$('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 8

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

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

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

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

input.my-input-element:invalid {

}

Примечания:

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

Answer 9

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

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

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

Answer 10

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

/*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;
    }
}

Более за великолепный внешний вид при проверке

 input, select, textarea {
    &[aria-invalid="true"] {
        border-color: amber !important;
    }

    &[aria-invalid="false"], &.valid {
        border-color: green !important;
    }
}