Mencocokkan kotak input kosong menggunakan CSS

Bagaimana cara menerapkan gaya ke kotak input kosong? Jika pengguna mengetikkan sesuatu di bidang input, gaya seharusnya tidak lagi diterapkan. Apakah ini dimungkinkan dalam CSS? Saya mencoba ini:

input[value=""]

Kalau saja bidangnya requiredbisa Anda ikutiinput: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>

Lihat langsung di jsFiddle

ATAU meniadakan penggunaan #foo-thing:invalid(kredit ke @SamGoody)

Di browser modern, Anda dapat menggunakan :placeholder-shownuntuk menargetkan input kosong (jangan dikacaukan dengan ::placeholder).

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

Info lebih lanjut dan dukungan browser: https://css-tricks.com/almanac/selectors/p/placeholder-shown/

Tidak ada pemilih dalam CSS yang melakukan ini. Selektor atribut cocok dengan nilai atribut, bukan nilai yang dihitung.

Anda harus menggunakan JavaScript.

Memperbarui nilai suatu bidang tidak memperbarui atribut nilainya di DOM sehingga itu sebabnya pemilih Anda selalu mencocokkan bidang, bahkan ketika itu sebenarnya tidak kosong.

Alih-alih menggunakan invalidpseudo-class untuk mencapai apa yang Anda inginkan, seperti:

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

bekerja dengan:

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

Tetapi gaya tidak akan berubah segera setelah seseorang mulai mengetik (Anda perlu JS untuk itu).

Jika mendukung browser lawas tidak diperlukan, Anda bisa menggunakan kombinasi required, validdan invalid.

Hal yang baik tentang penggunaan ini adalah validdan invalidelemen pseudo bekerja dengan baik dengan atribut tipe dari bidang input. Sebagai contoh:

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

Untuk referensi, JSFiddle di sini: 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');
    }
});

di jQuery. Saya menambahkan kelas dan ditata dengan css.

.empty { background:none; }

Ini bekerja untuk saya:

Untuk HTML, tambahkan requiredatribut ke elemen input

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

Untuk CSS, gunakan :invalidpemilih untuk menargetkan input kosong

input.my-input-element:invalid {

}

Catatan:

• Tentang requireddari w3Schools.com : "Saat ini, ini menentukan bahwa bidang input harus diisi sebelum mengirimkan formulir."

Pertanyaan ini mungkin telah ditanyakan beberapa waktu yang lalu, tetapi karena saya baru-baru ini mendarat di topik ini mencari validasi formulir sisi klien, dan karena :placeholder-shown dukungannya semakin baik, saya pikir yang berikut ini mungkin membantu orang lain.

Menggunakan ide Berend tentang menggunakan pseudo-class CSS4 ini, saya dapat membuat validasi formulir yang dipicu setelah pengguna selesai mengisinya.

Berikut adalah ademo dan penjelasan tentang CodePen: https://codepen.io/johanmouchet/pen/PKNxKQ

Jika Anda senang tidak mendukung IE atau pra-Chromium Edge (yang mungkin baik jika Anda menggunakan ini untuk peningkatan progresif), Anda dapat menggunakan :placeholder-shownseperti yang dikatakan Berend. Perhatikan bahwa untuk Chrome dan Safari Anda benar-benar membutuhkan tempat penampung yang tidak kosong agar ini berfungsi, meskipun sebuah ruang berfungsi.

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

Ini berhasil bagi saya untuk menambahkan nama kelas ke input dan kemudian menerapkan aturan CSS untuk itu:

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

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

Saya heran dengan jawaban yang kami miliki atribut yang jelas untuk mendapatkan kotak input kosong, lihat kode ini

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

MEMPERBARUI

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

Terlebih lagi karena memiliki tampilan yang bagus dalam validasi

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

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

Saya menyadari ini adalah utas yang sangat lama, tetapi banyak hal telah berubah sejak itu dan itu memang membantu saya menemukan kombinasi yang tepat dari hal-hal yang saya butuhkan untuk menyelesaikan masalah saya. Jadi saya pikir saya akan membagikan apa yang saya lakukan.

Masalahnya adalah saya nedded untuk memiliki css yang sama diterapkan untuk input opsional jika diisi, seperti yang saya miliki untuk diisi diperlukan. Css menggunakan kelas psuedo: valid yang menerapkan css pada input opsional juga saat tidak diisi.

Beginilah cara saya memperbaikinya;

HTML

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

CSS

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