Apakah ada cara untuk mendeteksi apakah suatu input memiliki teks di dalamnya melalui CSS? Saya sudah mencoba menggunakan :empty
pseudo-class, dan saya sudah mencoba menggunakan [value=""]
, tidak ada yang berhasil. Sepertinya saya tidak dapat menemukan solusi tunggal untuk ini.
Saya membayangkan ini harus dimungkinkan, mengingat kami memiliki kelas pseudo untuk :checked
, dan :indeterminate
, keduanya merupakan hal yang serupa.
Harap dicatat: Saya melakukan ini untuk gaya "Bergaya" , yang tidak dapat memanfaatkan JavaScript.
Perhatikan juga, bahwa Stylish digunakan, di sisi klien, pada halaman yang tidak dikontrol pengguna.
Jawaban:
Stylish tidak dapat melakukan ini karena CSS tidak dapat melakukan ini. CSS tidak memiliki penyeleksi (pseudo) untuk
<input>
nilai. Lihat:The
:empty
pemilih hanya merujuk pada node anak, tidak nilai input.[value=""]
melakukan kerja; tetapi hanya untuk kondisi awal . Ini karenavalue
atribut simpul (yang dilihat CSS), tidak sama denganvalue
properti simpul (Diubah oleh pengguna atau javascript DOM, dan dikirimkan sebagai data formulir).Kecuali jika Anda hanya peduli pada kondisi awal, Anda harus menggunakan skrip usersos atau Greasemonkey. Untungnya ini tidak sulit. Skrip berikut akan berfungsi di Chrome, atau Firefox dengan Greasemonkey atau Scriptish diinstal, atau di browser apa pun yang mendukung skrip pengguna (yaitu sebagian besar browser, kecuali IE).
Lihat demo batas CSS ditambah solusi javascript di halaman jsBin ini .
sumber
:valid
opsi ini membutuhkan penulisan ulang halaman - yang merupakan sesuatu yang tidak bisa dilakukan OP dengan Stylish dan tidak ada jawaban lain yang menunjukkan sama sekali dalam konteks penelusuran. Pengguna tidak memiliki kendali atas halaman yang ia kunjungi.Mungkin saja, dengan peringatan CSS biasa dan jika kode HTML dapat dimodifikasi. Jika Anda menambahkan
required
atribut ke elemen, maka elemen tersebut akan cocok:invalid
atau:valid
sesuai dengan apakah nilai kontrol kosong atau tidak. Jika elemen tidak memilikivalue
atribut (atau memilikivalue=""
), nilai kontrol awalnya kosong dan menjadi kosong ketika karakter apa pun (bahkan spasi) dimasukkan.Contoh:
Pseudo-classed
:valid
dan:invalid
didefinisikan dalam dokumen CSS tingkat Draf Kerja saja, tetapi dukungan agak meluas di browser, kecuali bahwa di IE, ia datang dengan IE 10.Jika Anda ingin membuat "kosong" menyertakan nilai yang hanya terdiri dari spasi, Anda bisa menambahkan atribut
pattern=.*\S.*
.Tidak ada (saat ini) pemilih CSS untuk mendeteksi secara langsung apakah kontrol input memiliki nilai kosong, jadi kita perlu melakukannya secara tidak langsung, seperti dijelaskan di atas.
Umumnya, penyeleksi CSS merujuk pada markup atau, dalam beberapa kasus, ke properti elemen yang diatur dengan skrip (JavaScript sisi klien), daripada tindakan pengguna. Misalnya,
:empty
mencocokkan elemen dengan konten kosong di markup; semuainput
elemen tak terhindarkan kosong dalam pengertian ini. Selector[value=""]
menguji apakah elemen memilikivalue
atribut dalam markup dan memiliki string kosong sebagai nilainya. Dan:checked
dan:indeterminate
hal-hal serupa. Mereka tidak terpengaruh oleh input pengguna aktual.sumber
required
atribut dapat mencegah pengiriman formulir.novalidate
atribut pada<form>
elemen sehingga tidak khawatir tentang tampilan merah ketika bidang kosong setelah diisi sekali:<form ... novalidate> <input ... required /> </form>
Anda bisa menggunakan
:placeholder-shown
kelas pseudo. Secara teknis placeholder diperlukan, tetapi Anda dapat menggunakan spasi sebagai gantinya.sumber
:placeholder-shown
maka ini harus menjadi jawaban yang diterima. Therequired
Metode tidak memperhitungkan kasus rekening pinggiran. Perlu dicatat bahwa Anda dapat memberikan ruang kepada placeholder dan metode ini akan tetap berfungsi. Pujian.input:not(:placeholder-shown)
akan selalu cocok<input/>
bahkan jika tidak ada nilai.dan
akan bekerja :-)
edit: http://jsfiddle.net/XwZR2/
sumber
input[value]:not([value=""])
- lebih baik. Terimakasih untuk semua. codepen.io/iegik/pen/ObZpqoPada dasarnya yang dicari semua orang adalah:
KURANG:
CSS murni:
sumber
Anda dapat menggunakan
placeholder
trik seperti yang tertulis di atas tanparequired
bidang.Masalahnya
required
adalah ketika Anda menulis sesuatu, kemudian menghapusnya - input sekarang akan selalu merah sebagai bagian dari spesifikasi HTML5 - maka Anda akan membutuhkan CSS seperti yang ditulis di atas untuk memperbaiki / menimpanya.Anda dapat melakukan hal-hal sederhana tanpa
required
CSS
Pena kode: https://codepen.io/arlevi/pen/LBgXjZ
sumber
Css sederhana:
Kode ini akan menerapkan css yang diberikan pada pemuatan halaman jika input diisi.
sumber
Anda dapat gaya
input[type=text]
berbeda tergantung pada apakah input memiliki teks dengan menata placeholder. Ini bukan standar resmi pada saat ini tetapi memiliki dukungan browser yang luas, meskipun dengan berbagai awalan:Contoh: http://fiddlesalad.com/scss/input-placeholder-css
sumber
Menggunakan JS dan CSS: bukan pseudoclass
sumber
The pemilih yang valid akan melakukan trik.
sumber
Anda dapat memanfaatkan placeholder dan menggunakan:
sumber
Trik Sederhana dengan jQuery dan CSS Seperti:
JQuery:
CSS:
sumber
lakukan pada bagian HTML seperti ini:
Parameter yang diperlukan akan membutuhkannya untuk memiliki teks di bidang input agar valid.
sumber
Iya! Anda dapat melakukannya dengan atribut dasar sederhana dengan pemilih nilai.
sumber
Ini tidak mungkin dengan css. Untuk menerapkan ini, Anda harus menggunakan JavaScript (misalnya
$("#input").val() == ""
).sumber