是否有一种方法来检测输入是否有文本在它通过CSS?我尝试过使用:empty伪类，也尝试过使用[value=""]，这两种方法都不起作用。我似乎找不到一个单一的解决方案。
我想这一定是可能的，考虑到我们有:checked和:indeterminate的伪类，两者都是类似的东西。
请注意:我这样做是为了“时尚”风格，它不能利用JavaScript。
还要注意，在客户端，在用户无法控制的页面上使用了Stylish。
当前回答
有效的选择器就可以做到这一点。
<input type="text" class="myText" required="required" />
.myText {
//default style of input
}
.myText:valid {
//style when input has text
}
其他回答
基本上每个人都在寻找的是:
少:
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;}
你可以根据输入[type=text]是否有文本来样式化占位符。这不是一个官方标准，但有广泛的浏览器支持，尽管有不同的前缀:
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
简单的css:
input[value]:not([value=""])
如果输入被填满，这段代码将在页面加载上应用给定的css。
在这里。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);
}
使用属性占位符和伪类占位符-显示是检测输入是否有文本的正确方法。
例子:
<input type="email" placeholder=" " required>
<label>Email</label>
input:focus ~ label,
input:not(:placeholder-shown) ~ label
{
top : -4em
left : -0.2em
font-size : 0.9em
}
