是否可以通过CSS检测输入中是否包含文本?我试过使用:empty伪类,并且试过使用[value=""],这两种都不起作用。我似乎找不到单个解决方案。
:empty
[value=""]
考虑到我们有:checked和和的伪类,我想这一定是有可能的,:indeterminate两者都是相似的。
:checked
:indeterminate
请注意: 我这样做是为了实现“时尚”风格 ,无法使用JavaScript。
另请注意,在用户无法控制的页面上,客户端使用了时尚样式。
时尚 无法做到这一点,因为CSS无法做到这一点。 CSS没有(伪)<input>值选择器。看到:
<input>
在:empty选择仅指子节点,而不是输入值。 [value=""] 确实 有效;但仅适用于 初始 状态。这是因为节点的value 属性 (CSS可以看到)与节点的value 属性 (由用户或DOM javascript更改,并作为表单数据提交)不同。
value
除非你只关心初始状态, 你 必须 使用一个userscript或Greasemonkey的脚本。 幸运的是,这并不难。以下脚本将在Chrome或安装了Greasemonkey或Scriptish的Firefox中运行,或在任何支持用户脚本的浏览器(即除IE之外的大多数浏览器)中运行。
在此jsBin页面上查看CSS限制的演示以及javascript解决方案。
// ==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"; }