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

Question

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

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

input[value=""]

209

css input css-selectors

Источник

user182971 01 сен '10 в 10:21

16 ответов

Другие вопросы по тегам css input css-selectors

user322174 24 фев '16 в 04:48 2016-02-24 04:48 · Answer 1 · 2016-02-24 04:48

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

user212278 26 июн '12 в 14:37 2012-06-26 14:37 · Answer 2 · 2012-06-26 14:37

Если только поле 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)

178

Источник

user212278 26 июн '12 в 14:37

user19068 01 сен '10 в 10:23 2010-09-01 10:23 · Answer 3 · 2010-09-01 10:23

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

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

45

Источник

user19068 01 сен '10 в 10:23

user170230 01 сен '10 в 10:30 2010-09-01 10:30 · Answer 4 · 2010-09-01 10:30

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

работает с:

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

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

29

Источник

user170230 01 сен '10 в 10:30

user4768433 30 ноя '15 в 15:24 2015-11-30 15:24 · Answer 5 · 2015-11-30 15:24

Обновление значения поля не обновляет его атрибут значения в 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">

user2377718 15 ноя '19 в 12:06 2019-11-15 12:06 · Answer 6 · 2019-11-15 12:06

Я понимаю, что это очень старый поток, но с тех пор все немного изменилось, и это помогло мне найти правильную комбинацию вещей, которые мне нужны, чтобы решить мою проблему. Так что я подумал, что поделюсь тем, что сделал.

Проблема заключалась в том, что я должен был применить тот же CSS для необязательного ввода, если он был заполнен, как и для заполненного required. CSS использовал класс psuedo:valid, который применял CSS к необязательному вводу, даже если он не заполнен.

Вот как я это исправил;

HTML

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

CSS

input:required:valid {
    ....
}
input:optional::not(:placeholder-shown){
    ....
}

user2838827 30 ноя '15 в 15:46 2015-11-30 15:46 · Answer 7 · 2015-11-30 15:46

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

user4053142 19 апр '16 в 21:29 2016-04-19 21:29 · Answer 8 · 2016-04-19 21:29

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

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

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

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

input.my-input-element:invalid {

}

Заметки:

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

user1842719 22 сен '14 в 16:30 2014-09-22 16:30 · Answer 9 · 2014-09-22 16:30

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

8

Источник

user1842719 22 сен '14 в 16:30

user1050844 27 мар '20 в 21:02 2020-03-27 21:02 · Answer 10 · 2020-03-27 21:02

У меня сработало добавить имя класса к входу, а затем применить к нему правила CSS:

<input type="text" name="product" class="product" />

<style>
input[value=""].product {
    display: none;
}
</style>

7

Источник

user1050844 27 мар '20 в 21:02

user5711164 02 авг '17 в 09:12 2017-08-02 09:12 · Answer 11 · 2017-08-02 09:12

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

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

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

user7077589 07 янв '20 в 08:22 2020-01-07 08:22 · Answer 12 · 2020-01-07 08:22

Если вы счастливы, что не поддерживаете IE или pre-Chromium Edge (что может быть хорошо, если вы используете это для прогрессивного улучшения), вы можете использовать :placeholder-shownкак сказал Беренд. Обратите внимание, что для Chrome и Safari вам действительно нужен непустой заполнитель, чтобы это работало, хотя пробел работает.

*,
 ::after,
 ::before {
  box-sizing: border-box;
}

label.floating-label {
  display: block;
  position: relative;
  height: 2.2em;
  margin-bottom: 1em;
}

label.floating-label input {
  font-size: 1em;
  height: 2.2em;
  padding-top: 0.7em;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

label.floating-label input:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

label.floating-label input+span {
  position: absolute;
  top: 0em;
  left: 0;
  display: block;
  width: 100%;
  font-size: 0.66em;
  line-height: 1.5;
  color: #495057;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  transition: font-size 0.1s ease-in-out, top 0.1s ease-in-out;
}

label.floating-label input:placeholder-shown {
  padding-top: 0;
  font-size: 1em;
}

label.floating-label input:placeholder-shown+span {
  top: 0.3em;
  font-size: 1em;
}

<fieldset>
  <legend>
    Floating labels example (no-JS)
  </legend>
  <label class="floating-label">
    <input type="text" placeholder=" ">
    <span>Username</span>
  </label>
  <label class="floating-label">
    <input type="Password" placeholder=" ">
    <span>Password</span>
  </label>
</fieldset>
<p>
  Inspired by Bootstrap's <a href="https://getbootstrap.com/docs/4.0/examples/floating-labels/">floating labels</a>.
</p>

user5317678 15 фев '22 в 17:14 2022-02-15 17:14 · Answer 13 · 2022-02-15 17:14

Итак, ранее я играл с новыми предложениями :where и :is и задумал это немного развлечься, и после того, как нашел этот пост с битами :invalid и :placeholder-show, подумал, что могу поделиться этой возможностью для дальнейшего использования.

      :required:where( input, textarea ):where( :placeholder-shown, :invalid ) {
    border-color: var(--warning);
}

который применяет :root { --warning: orange; }color для любого требуемого ввода или текстовой области, которая либо пуста, либо недействительна. И это просто сексуально

user13242878 27 авг '22 в 21:24 2022-08-27 21:24 · Answer 14 · 2022-08-27 21:24

Вот как вы можете сделать это возможным. не забудьте установитьplaceholder=" "иrequiredattr к вашим входам. вы можете изменить реквизит, как вы хотите.

1

Источник

user13242878 27 авг '22 в 21:24

user13953936 01 окт '21 в 02:48 2021-10-01 02:48 · Answer 15 · 2021-10-01 02:48

Хотя ни один браузер в настоящее время (2021-10-01) его не поддерживает, есть предложение по :blank псевдокласс.

ссылка: https://developer.mozilla.org/en-US/docs/Web/CSS/:blank . Обратите внимание, это экспериментальный вариант , и на данный момент ни один браузер не поддерживает его.

1

Источник

user13953936 01 окт '21 в 02:48

user243213 27 апр '15 в 09:37 2015-04-27 09:37 · Answer 16 · 2015-04-27 09:37

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

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

ОБНОВИТЬ

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