是否有一种方法来检测输入是否有文本在它通过CSS?我尝试过使用:empty伪类，也尝试过使用[value=""]，这两种方法都不起作用。我似乎找不到一个单一的解决方案。
我想这一定是可能的，考虑到我们有:checked和:indeterminate的伪类，两者都是类似的东西。
请注意:我这样做是为了“时尚”风格，它不能利用JavaScript。
还要注意，在客户端，在用户无法控制的页面上使用了Stylish。
当前回答
是的!你可以用简单的基本属性和值选择器来做。
使用空值属性选择器并应用属性 输入(值= ")
input[value=''] {
background: red;
}
其他回答
你可以使用上面写的没有必填字段的占位符技巧。
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
这是有可能的，只要有通常的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 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;}
您可以使用:占位符显示的伪类。从技术上讲，占位符是必需的，但您可以使用空格代替。
输入:没有(placeholder-shown) { 边框颜色:绿色; } 输入:placeholder-shown { 边框颜色:红色; } <input placeholder="Text is required" /> <input placeholder=" " value="This one is valid" /> <input placeholder=" " /> .
