是否有一种方法来检测输入是否有文本在它通过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
}

其他回答

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

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

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

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

您可以利用占位符并使用:

input:not(:placeholder-shown) {
  border: 1px solid red;
}

您可以使用:占位符显示的伪类。从技术上讲,占位符是必需的,但您可以使用空格代替。

输入:没有(placeholder-shown) { 边框颜色:绿色; } 输入:placeholder-shown { 边框颜色:红色; } <input placeholder="Text is required" /> <input placeholder=" " value="This one is valid" /> <input placeholder=" " /> .

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

例子:

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