CSS kullanarak boş bir giriş kutusunu eşleme

Boş bir giriş kutusuna nasıl stil uygularım? Kullanıcı giriş alanına bir şey yazarsa, stil artık uygulanmamalıdır. Bu CSS'de mümkün mü? Bunu denedim:

input[value=""]

Keşke tarlada requiredolsaydıninput: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>

Bkz jsFiddle canlı

VEYA kullanarak olumsuzlama #foo-thing:invalid(@SamGoody'a kredi)

Modern tarayıcılarda :placeholder-shownboş girişi hedeflemek için kullanabilirsiniz (karıştırılmamalıdır ::placeholder).

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

Daha fazla bilgi ve tarayıcı desteği: https://css-tricks.com/almanac/selectors/p/placeholder-shown/

CSS'de bunu yapan bir seçici yoktur. Öznitelik seçiciler, hesaplanan değerlerle değil öznitelik değerleriyle eşleşir.

JavaScript kullanmanız gerekir.

Bir alanın değerini güncellemek, DOM'daki değer özelliğini güncellemez, bu nedenle seçiciniz gerçekten boş olmasa bile her zaman bir alanla eşleşir.

Bunun yerine , istediğinizi elde etmek için invalidsözde sınıfı kullanın, şöyle:

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

ile çalışır:

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

Ancak, birisi yazmaya başlar başlamaz stil değişmez (bunun için JS'ye ihtiyacınız vardır).

Destekleyen eski tarayıcılar gerekli değilse, sen bir arada kullanabilir required, validve invalid.

Bunu kullanmanın iyi yanı validve invalidsözde elemanlar, girdi alanlarının tip öznitelikleriyle iyi çalışır. Örneğin:

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

Referans için, JSFiddle burada: 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 içinde. Bir sınıf ekledim ve css ile şekillendirdim.

.empty { background:none; }

Bu benim için çalıştı:

HTML için, requiredözelliği giriş öğesine ekleyin

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

CSS :invalidiçin boş girişi hedeflemek için seçiciyi kullanın

input.my-input-element:invalid {

}

Notlar:

• Hakkında requireddan w3Schools.com : "Mevcut, bir giriş alanı formu göndermeden önce doldurulmalıdır ifade ettiğinde"

Bu soru bir süre önce sorulmuş olabilir, ancak kısa süre önce bu konuya istemci tarafı form doğrulaması aramak için geldiğimde ve :placeholder-shown destek iyileştikçe, aşağıdakilerin başkalarına yardımcı olabileceğini düşündüm.

Bu CSS4 sözde sınıfını kullanma Berend fikrini kullanarak, sadece kullanıcı doldurmayı bitirdikten sonra tetiklenen bir form doğrulama oluşturabildim.

İşte ademo ve CodePen hakkında açıklama: https://codepen.io/johanmouchet/pen/PKNxKQ

IE'yi veya Chromium Edge'i desteklememekten memnun değilseniz (bunu aşamalı geliştirme için kullanıyorsanız iyi olabilir), :placeholder-shownBerend'in söylediği gibi kullanabilirsiniz . Chrome ve Safari için, bir alan çalışmasına rağmen, bunun çalışması için aslında boş olmayan bir yer tutucusuna ihtiyacınız olduğunu unutmayın.

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

Girişe bir sınıf adı eklemek ve daha sonra buna CSS kuralları uygulamak benim için çalıştı:

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

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

Boş giriş kutuları almak için net bir özelliğe sahip olduğumuzu merak ediyorum, bu koda bir göz atın

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

GÜNCELLEME

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

Doğrulamaya büyük bir bakış için daha fazlası

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

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

Bunun çok eski bir iş parçacığı olduğunu anlıyorum, ama işler o zamandan beri biraz değişti ve sorunumu düzeltmek için gereken şeylerin doğru kombinasyonunu bulmama yardımcı oldu. Ben de yaptıklarımı paylaşacağımı düşündüm.

Sorun, doldurulmuşsa, isteğe bağlı bir giriş için aynı css uygulanmış olması gerektiği için doldurulmuş, gerekli bir dolu için vardı. Css, psuedo sınıfını kullandı: geçerli olan, doldurulmadığında isteğe bağlı girişe css uygulayan geçerli.

Ben böyle düzelttim;

HTML

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

CSS

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