是否有一种方法来检测输入是否有文本在它通过CSS?我尝试过使用:empty伪类，也尝试过使用[value=""]，这两种方法都不起作用。我似乎找不到一个单一的解决方案。
我想这一定是可能的，考虑到我们有:checked和:indeterminate的伪类，两者都是类似的东西。
请注意:我这样做是为了“时尚”风格，它不能利用JavaScript。
还要注意，在客户端，在用户无法控制的页面上使用了Stylish。
当前回答
基本上每个人都在寻找的是:
少:
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 onkeyup="this.setAttribute('value', this.value);" />
and
input[value=""]
将工作:-)
编辑:http://jsfiddle.net/XwZR2/
在HTML部分这样做:
<input type="text" name="Example" placeholder="Example" required/>
为了有效，必需的参数将要求它在输入字段中有文本。
基本上每个人都在寻找的是:
少:
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;}
在这里。fase是html代码中的一个输入类。
div.fase > input:focus:required:invalid {
color: red;
border-color: red;
box-shadow: 0 0 6px red;
}
div.fase input:focus:required:valid,
input:focus:required:placeholder-shown {
border-color: rgb(22, 172, 22);
box-shadow: 0 0 8px rgb(28, 150, 28);
}
div.fase input:valid {
border-color: rgb(47, 148, 49);
}
您可以使用:占位符显示的伪类。从技术上讲，占位符是必需的，但您可以使用空格代替。
输入:没有(placeholder-shown) { 边框颜色:绿色; } 输入:placeholder-shown { 边框颜色:红色; } <input placeholder="Text is required" /> <input placeholder=" " value="This one is valid" /> <input placeholder=" " /> .
