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

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

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

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

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

在HTML部分这样做:

<input type="text" name="Example" placeholder="Example" required/>

为了有效,必需的参数将要求它在输入字段中有文本。

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

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