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

Ответ 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>

Ответ 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/

Ответ 3

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

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

Ответ 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">

Ответ 5

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

<input type="text" />

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

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

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

Ответ 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="[email protected]" required />
<input type="url" name="website" placeholder="http://johndoe.com"/>
<input type="text" name="name" placeholder="John Doe" required/>

Ответ 7

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

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

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

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

input.my-input-element:invalid {

}

Примечания:

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

Ответ 8

$('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; }

Ответ 9

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

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

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

Ответ 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;
    }
}