Dopasowywanie pustego pola wejściowego za pomocą CSS

Jak zastosować styl do pustego pola wprowadzania? Jeśli użytkownik wpisze coś w polu wejściowym, styl nie powinien już być stosowany. Czy to możliwe w CSS? Próbowałem tego:

input[value=""]

Gdyby tylko pole było required, mógłbyś iść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>

Zobacz na żywo na jsFiddle

LUB #foo-thing:invalidzaneguj użycie (kredyt dla @SamGoody)

W nowoczesnych przeglądarkach możesz użyć :placeholder-showndo kierowania na puste dane wejściowe (nie mylić z ::placeholder).

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

Więcej informacji i obsługa przeglądarek: https://css-tricks.com/almanac/selectors/p/placeholder-shown/

W CSS nie ma selektora, który to robi. Selektory atrybutów pasują do wartości atrybutów, a nie do obliczonych wartości.

Musiałbyś użyć JavaScript.

Aktualizacja wartości pola nie aktualizuje jego atrybutu wartości w DOM, dlatego Twój selektor zawsze pasuje do pola, nawet jeśli nie jest ono w rzeczywistości puste.

Zamiast tego użyj invalidpseudoklasy, aby osiągnąć to, co chcesz, na przykład:

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])

pracuje z:

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

Ale styl nie zmieni się, gdy tylko ktoś zacznie pisać (potrzebujesz do tego JS).

Jeśli nie jest potrzebne wspieranie starszych przeglądarek, można użyć kombinacji required, validi invalid.

Dobrą rzeczą w używaniu tego jest to, że pseudoelementy validi invaliddobrze współpracują z atrybutami typu pól wejściowych. Na przykład:

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/>

Dla odniesienia, JSFiddle tutaj: 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');
    }
});

w jQuery. Dodałem klasę i stylizowałem za pomocą css.

.empty { background:none; }

To zadziałało dla mnie:

W przypadku kodu HTML dodaj requiredatrybut do elementu wejściowego

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

W przypadku CSS użyj :invalidselektora, aby wskazać puste wejście

input.my-input-element:invalid {

}

Uwagi:

• Informacje requiredz witryny w3Schools.com : „Jeśli jest obecny, określa, że ​​przed przesłaniem formularza należy wypełnić pole wejściowe”.

To pytanie mogło zostać zadane jakiś czas temu, ale ponieważ niedawno trafiłem na ten temat, szukając walidacji formularzy po stronie klienta, a :placeholder-shown wsparcie jest coraz lepsze, pomyślałem, że poniższe informacje mogą pomóc innym.

Korzystając z pomysłu Berenda, polegającego na użyciu tej pseudoklasy CSS4, udało mi się stworzyć walidację formularza uruchamianą dopiero po zakończeniu wypełniania przez użytkownika.

Oto ademo i wyjaśnienie dotyczące CodePen: https://codepen.io/johanmouchet/pen/PKNxKQ

Jeśli cieszysz się, że nie obsługujesz IE ani Pre-Chromium Edge (co może być w porządku, jeśli używasz tego do stopniowego ulepszania), możesz użyć :placeholder-showntak, jak powiedział Berend. Zwróć uwagę, że w przypadku Chrome i Safari faktycznie potrzebujesz niepustego symbolu zastępczego, aby to działało, chociaż spacja działa.

*,
 ::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>

Udało mi się dodać nazwę klasy do danych wejściowych, a następnie zastosować do tego reguły CSS:

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

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

Dziwią mnie odpowiedzi, które mają jasny atrybut, aby uzyskać puste pola wejściowe, spójrz na ten kod

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

AKTUALIZACJA

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

Więcej za świetny wygląd podczas walidacji

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

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

Zdaję sobie sprawę, że to bardzo stary wątek, ale od tamtego czasu sytuacja nieco się zmieniła i pomogło mi to znaleźć właściwą kombinację rzeczy, których potrzebowałem, aby naprawić mój problem. Więc pomyślałem, że podzielę się tym, co zrobiłem.

Problem polegał na tym, że potrzebowałem tego samego CSS zastosowanego do opcjonalnego wejścia, jeśli był wypełniony, tak jak w przypadku wypełnionego wymagania. CSS wykorzystywał klasę psuedo: valid, która zastosowała CSS na opcjonalnym wejściu również wtedy, gdy nie był wypełniony.

Tak to naprawiłem;

HTML

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

CSS

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