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

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

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

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


当前回答

你可以使用上面写的没有必填字段的占位符技巧。

required的问题是,当你写了一些东西,然后删除它——作为HTML5规范的一部分,输入现在总是红色的——然后你就需要一个上面写的CSS来修复/覆盖它。

你可以简单地做w/o要求的事情

<input type="text" placeholder="filter here" id="mytest" />

CSS

#mytest:placeholder-shown {
/* if placeholder is shown - meaning - no value in input */
  border: black 1px solid;
  color: black;
}
#mytest {
  /* placeholder isn't shown - we have a value in input */
  border: red 1px solid;
  color: red;
}

代码笔:https://codepen.io/arlevi/pen/LBgXjZ

其他回答

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

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

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

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

简单的css:

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

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

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:not(:placeholder-shown) {
  border: 1px solid red;
}