检测输入是否有文本在它使用CSS -在一个页面上，我正在访问和不控制?

是否有一种方法来检测输入是否有文本在它通过CSS?我尝试过使用:empty伪类，也尝试过使用[value=""]，这两种方法都不起作用。我似乎找不到一个单一的解决方案。

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

请注意:我这样做是为了“时尚”风格，它不能利用JavaScript。

还要注意，在客户端，在用户无法控制的页面上使用了Stylish。

当前回答

<input onkeyup="this.setAttribute('value', this.value);" />

and

input[value=""]

将工作:-)

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

其他回答

有效的选择器就可以做到这一点。

<input type="text" class="myText" required="required" />

.myText {
    //default style of input
}
.myText:valid {
    //style when input has text
}

实际上有一种不需要JavaScript的方法。

如果你将<input>的required选择器设置为true，你可以用CSS:valid标签检查其中是否有文本。

引用:

MDN文档 CSS技巧

输入{ 背景:红色; } 输入:有效的{ 背景:lightgreen; } <input type="text" required>

是的!你可以用简单的基本属性和值选择器来做。

使用空值属性选择器并应用属性输入(值= ")

input[value=''] {
    background: red;
}

使用属性占位符和伪类占位符-显示是检测输入是否有文本的正确方法。

例子:

<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
}

这在css中是不可能的。要实现这一点，你必须使用JavaScript(例如$("#input").val() == "")。

推荐文章