Збіг порожнього поля введення за допомогою CSS

Як застосувати стиль до порожнього поля введення? Якщо користувач щось вводить у полі введення, стиль більше не повинен застосовуватися. Чи можливо це в CSS? Я спробував це:

input[value=""]

Якби тільки те поле, 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)

У сучасних браузерах ви можете використовувати :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/

У CSS немає селектора, який би це робив. Селектори атрибутів відповідають значенням атрибутів, а не обчисленим значенням.

Вам доведеться використовувати JavaScript.

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

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

працює з:

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

Але стиль не зміниться, як тільки хтось почне вводити текст (для цього вам потрібен JS).

Якщо підтримують застарілі браузери не потрібно, ви можете використовувати комбінацію 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/

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

Це працювало для мене:

Для HTML додайте requiredатрибут до вхідного елемента

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

Для CSS використовуйте :invalidселектор, щоб націлити порожній вхід

input.my-input-element:invalid {

}

Примітки:

• Про requiredз w3Schools.com : «Коли присутній, він вказує , що поле введення необхідно заповнити перед відправкою форми»

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

Використовуючи ідею Berend про використання цього CSS4 псевдокласу, я зміг створити перевірку форми, що запускається лише після того, як користувач закінчить її заповнювати.

Ось ademo та пояснення на CodePen: https://codepen.io/johanmouchet/pen/PKNxKQ

Якщо ви щасливі, що не підтримуєте IE або попередній 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>

Мені працювало, щоб додати ім’я класу до вводу та застосувати до цього правила CSS:

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

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

Мене цікавлять відповіді, у нас є чіткий атрибут, щоб отримати порожні поля для введення, погляньте на цей код

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

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

Проблема полягала в тому, що я мав вказати той самий css, який застосовується для необов'язкового введення, якщо він був заповнений, як і для заповненого необхідного. У css використовується клас psuedo: дійсний, який застосував css до необов'язкового вводу також, коли він не заповнений.

Ось як я це виправив;

HTML

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

CSS

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