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

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

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

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


当前回答

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

其他回答

jQuery和CSS的简单技巧如下:

JQuery:

$('input[value=""]').addClass('empty');
        $('input').keyup(function(){
            if( $(this).val() == ""){
                $(this).addClass("empty");
            }else{
                $(this).removeClass("empty");
            }
        });

CSS:

input.empty:valid{
        box-shadow: none;
        background-image: none;
        border: 1px solid #000;
    }

    input:invalid,
    input:required {
        box-shadow: 3px 1px 5px rgba(200, 0, 0, 0.85);
        border: 1px solid rgb(200,0,0);
    }




    input:valid{
        box-shadow: none;
        border: 1px solid #0f0;
    }

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

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

引用:

MDN文档 CSS技巧

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

在这里。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);
}

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

使用JS和CSS:不是伪类

输入{ 字体大小:13 px; 填充:5 px; 宽度:100 px; } 输入(value = " ") { 边框:2px实体#fa0000; } 输入:没有((value = " ")) { 边框:2px实体#fafa00; } <input type="text" onkeyup="this. "setAttribute('value', this.value);" value="" /> . setAttribute('value', this.value);