Rumah > Soal Jawab > teks badan
P粉7104789902023-08-21 12:14:04
Anda boleh menggunakan :placeholder-shown
pseudo-classes. Secara teknikal, pemegang tempat diperlukan, tetapi anda boleh menggunakan ruang sebaliknya.
input:not(:placeholder-shown) { border-color: green; } input:placeholder-shown { border-color: red; }
<input placeholder="需要文本" /> <input placeholder=" " value="这个有效" /> <input placeholder=" " />
P粉4156323192023-08-21 09:35:11
Bergaya tidak boleh melakukan ini kerana CSS tidak membenarkannya. CSS tidak mempunyai pemilih (pseudo) untuk <input>
nilai. Lihat:
:empty
Pemilih hanya berfungsi pada nod anak, bukan pada nilai input.
[value=""]
[value=""]
可以工作;但仅适用于初始状态。这是因为CSS所看到的节点的value
属性与节点的value
boleh berfungsi; tetapi hanya dalam keadaan awal
property nod seperti yang dilihat oleh CSS adalah berbeza daripada value
property nod (diubah oleh pengguna atau JavaScript DOM dan diserahkan sebagai data borang) .
// ==UserScript== // @name _Dynamically style inputs based on whether they are blank. // @include http://YOUR_SERVER.COM/YOUR_PATH/* // @grant GM_addStyle // ==/UserScript== /*- The @grant directive is needed to work around a design change introduced in GM 1.0. It restores the sandbox. */ var inpsToMonitor = document.querySelectorAll ( "form[name='JustCSS'] input[name^='inp']" ); for (var J = inpsToMonitor.length - 1; J >= 0; --J) { inpsToMonitor[J].addEventListener ("change", adjustStyling, false); inpsToMonitor[J].addEventListener ("keyup", adjustStyling, false); inpsToMonitor[J].addEventListener ("focus", adjustStyling, false); inpsToMonitor[J].addEventListener ("blur", adjustStyling, false); inpsToMonitor[J].addEventListener ("mousedown", adjustStyling, false); //-- Initial update. note that IE support is NOT needed. var evt = document.createEvent ("HTMLEvents"); evt.initEvent ("change", false, true); inpsToMonitor[J].dispatchEvent (evt); } function adjustStyling (zEvent) { var inpVal = zEvent.target.value; if (inpVal && inpVal.replace (/^\s+|\s+$/g, "") ) zEvent.target.style.background = "lime"; else zEvent.target.style.background = "inherit"; }