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

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

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

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


当前回答

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

and

input[value=""]

将工作:-)

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

其他回答

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

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

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

引用:

MDN文档 CSS技巧

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

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

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

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

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

你可以根据输入[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