是否有一种方法来检测输入是否有文本在它通过CSS?我尝试过使用:empty伪类，也尝试过使用[value=""]，这两种方法都不起作用。我似乎找不到一个单一的解决方案。
我想这一定是可能的，考虑到我们有:checked和:indeterminate的伪类，两者都是类似的东西。
请注意:我这样做是为了“时尚”风格，它不能利用JavaScript。
还要注意，在客户端，在用户无法控制的页面上使用了Stylish。
当前回答
您可以利用占位符并使用:
input:not(:placeholder-shown) {
border: 1px solid red;
}
其他回答
实际上有一种不需要JavaScript的方法。
如果你将<input>的required选择器设置为true，你可以用CSS:valid标签检查其中是否有文本。
引用:
MDN文档 CSS技巧
输入{ 背景:红色; } 输入:有效的{ 背景:lightgreen; } <input type="text" required>
在HTML部分这样做:
<input type="text" name="Example" placeholder="Example" required/>
为了有效，必需的参数将要求它在输入字段中有文本。
你可以根据输入[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
使用属性占位符和伪类占位符-显示是检测输入是否有文本的正确方法。
例子:
<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
}
你可以使用上面写的没有必填字段的占位符技巧。
required的问题是，当你写了一些东西，然后删除它——作为HTML5规范的一部分，输入现在总是红色的——然后你就需要一个上面写的CSS来修复/覆盖它。
你可以简单地做w/o要求的事情
<input type="text" placeholder="filter here" id="mytest" />
CSS
#mytest:placeholder-shown {
/* if placeholder is shown - meaning - no value in input */
border: black 1px solid;
color: black;
}
#mytest {
/* placeholder isn't shown - we have a value in input */
border: red 1px solid;
color: red;
}
代码笔:https://codepen.io/arlevi/pen/LBgXjZ
