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

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

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

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


当前回答

这是有可能的,只要有通常的CSS注意事项,并且HTML代码可以修改。如果向元素添加所需的属性,则该元素将根据控件的值是否为空匹配:invalid或:valid。如果元素没有value属性(或者它有value=""),控件的值最初为空,当输入任何字符(甚至空格)时变成非空。

例子:

<style>
#foo { background: yellow; }
#foo:valid { outline: solid blue 2px; }
#foo:invalid { outline: solid red 2px; }
</style>
<input id=foo required>

伪分类:valid和:invalid只在工作草案级别的CSS文档中定义,但在浏览器中支持相当广泛,除了在IE中,它随IE 10而来。

如果你想让“空”包含的值只由空格组成,你可以添加属性pattern=.*\S.*。

(目前)没有CSS选择器可以直接检测输入控件是否有非空值,所以我们需要像上面描述的那样间接地做这件事。

通常,CSS选择器指的是标记,或者在某些情况下,指的是通过脚本(客户端JavaScript)设置的元素属性,而不是用户操作。例如:empty在标记中匹配元素中的空内容;在这个意义上,所有输入元素都不可避免地为空。选择器[value=""]测试元素在标记中是否具有value属性,并将空字符串作为其值。和:checked和:indeterminate是类似的东西。它们不受实际用户输入的影响。

其他回答

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

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

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

在这里。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:

input[value]:not([value=""])

如果输入被填满,这段代码将在页面加载上应用给定的css。