检测一个input中是否有使用CSS的文本 – 在我正在访问的页面上，并且不能控制？

有没有办法通过CSS来检测input是否包含文本？ 我试过使用:empty伪类，我试过使用[value=""] ，这两个都没有工作。 我似乎无法find一个单一的解决scheme。

我想这一定是可能的，考虑到我们有伪类:checked和:indeterminate ，这两者都是类似的东西。

请注意： 我正在做一个“时髦”的风格 ，它不能使用JavaScript。

另外请注意，在客户端，在用户不能控制的页面上使用了Stylish。

时尚不能这样做，因为CSS不能做到这一点。 CSS没有用于<input>值的（伪）select器。 看到：

  • W3Cselect器规范
  • Mozilla / Firefox支持的select器
  • 跨浏览器，CSS3支持表

:emptyselect器只能引用子节点，而不是input值。
[value=""] 确实有效; 但仅限于初始状态。 这是因为节点的value 属性 （即CSS所看到的）不同于节点的value 属性 （由用户或DOM javascript更改，并作为表单数据提交）。

除非您只关心初始状态，否则您必须使用脚本或Greasemonkey脚本。 幸运的是，这并不难。 下面的脚本可以在Chrome或Firefox上安装Greasemonkey或Scriptish，也可以在任何支持脚本的浏览器（IE浏览器，IE除外）上运行。

在这个jsBin页面上查看CSS的限制和JavaScript解决scheme的演示 。 

 // ==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"; }

有可能，通常的CSS警告，如果HTML代码可以修改。 如果将required属性添加到元素，则元素将根据控件的值是否为空来匹配:invalid或:valid 。 如果元素没有value属性（或者value="" ），那么当input任何字符（甚至空格）时，控件的值最初是空的，并且变为非空值。

例： 

 <style> #foo { background: yellow; } #foo:valid { outline: solid blue 2px; } #foo:invalid { outline: solid red 2px; } </style> <input id=foo required>

在工作草案级别CSS文档中只定义了伪分类:valid和:invalid ，但支持在浏览器中相当普遍，除了在IE中使用IE 10。

如果你想使“空”包含值只包含空格，你可以添加属性pattern=.*\S.* 。

当前没有用于直接检测input控件是否具有非空值的CSSselect器，因此我们需要间接地进行操作，如上所述。

通常，CSSselect器引用标记，或者在某些情况下引用用脚本（客户端JavaScript）设置的属性，而不是用户操作。 例如:empty在标记中:empty匹配:empty元素的元素; 从这个意义上说，所有的input元素都是不可避免的空的。 select器[value=""]testing元素是否在标记中具有value属性，并且具有空string作为其值。 而且:checked和:indeterminate是类似的事情。 它们不受实际用户input的影响。

你可以使用:placeholder-shown伪类。 

 input:not(:placeholder-shown) { /** input is not empty */ } input:placeholder-shown { /** input is empty */ } 
 <input onkeyup="this.setAttribute('value', this.value);" />

和 

 input[value=""]

将工作 ：-）

编辑： http : //jsfiddle.net/XwZR2/

基本上大家都在寻找的是：

减： 

 input:focus:required{ &:invalid{ color: red; border-color: red; box-shadow: 0 0 6px red;} &:valid, &:placeholder-shown{ border-color: green; box-shadow: 0 0 8px green;} }

纯CSS： 

 input:focus:required:invalid{ color: red; border-color: red; box-shadow: 0 0 6px red;} input:focus:required:valid, input:focus:required:placeholder-shown{ border-color: green; box-shadow: 0 0 8px green;}

您可以对input[type=text]样式进行不同的设置，具体取决于input是否通过占位符样式设置文本。 目前这不是官方的标准，但具有广泛的浏览器支持，但是具有不同的前缀： 

 input[type=text] { color: red; } input[type=text]:-moz-placeholder { color: green; } input[type=text]::-moz-placeholder { color: green; } input[type=text]:-ms-input-placeholder { color: green; } input[type=text]::-webkit-input-placeholder { color: green; }

例如： http : //fiddlesalad.com/scss/input-placeholder-css

使用JS和CSS：不是伪类 

  input { font-size: 13px; padding: 5px; width: 100px; } input[value=""] { border: 2px solid #fa0000; } input:not([value=""]) { border: 2px solid #fafa00; } 
 <input type="text" onkeyup="this.setAttribute('value', this.value);" value="" />

在HTML部分上这样做： 

 <input type="text" name="Example" placeholder="Example" required="" />

所需的参数将要求它在input字段中有文本才能生效。

简单的技巧与jQuery和CSS像这样：

JQuery的： 

 $('input[value=""]').addClass('empty'); $('input').keyup(function(){ if( $(this).val() == ""){ $(this).addClass("empty"); }else{ $(this).removeClass("empty"); } });

CSS： 

 input.empty:valid{ box-shadow: none; background-image: none; border: 1px solid #000; } input:invalid, input:required { box-shadow: 3px 1px 5px rgba(200, 0, 0, 0.85); border: 1px solid rgb(200,0,0); } input:valid{ box-shadow: none; border: 1px solid #0f0; }

有效的select器将做的伎俩。 

 <input type="text" class="myText" required="required" /> .myText { //default style of input } .myText:valid { //style when input has text }

这是不可能的与CSS。 要实现这个，你将不得不使用JavaScript（例如$("#input").val() == "" ）。

Interesting Posts