是否有一种方法可以通过CSS检测输入中是否包含文本？我试过使用:empty伪类，并且试过使用[value=""]，但两者都不起作用。我似乎无法找到一个解决方案。
我想这是有可能的，考虑到我们有:checked和:indeterminate的伪类，两者都是相似的东西。
请注意：我正在为“时尚”风格设置此功能，无法使用JavaScript。
还请注意，在用户无法控制的页面上，客户端使用了时尚版。
Stylish无法执行此操作，因为CSS无法执行此操作。 CSS没有<input>值的（伪）选择器。请参阅：
:empty选择器仅引用子节点，而不引用输入值。[value=""]does工作；但仅用于initial状态。这是因为节点的value attribute（CSS可以看到）与节点的value property不同（由用户或DOM javascript更改，并作为表单数据提交）。
除非您只关心初始状态，否则您必须使用用户脚本或Greasemonkey脚本。幸运的是，这并不难。以下脚本将在Chrome或安装了Greasemonkey或Scriptish的Firefox中运行，或在任何支持用户脚本的浏览器（即除IE之外的大多数浏览器）中运行。
请参见this jsBin page上CSS限制和javascript解决方案的演示。
// ==UserScript==
// @name _Dynamically style inputs based on whether they are blank.
// @include http://YOUR_SERVER.COM/YOUR_PATH/*
// @grant GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
introduced in GM 1.0. It restores the sandbox.
*/
var inpsToMonitor = document.querySelectorAll (
"form[name='JustCSS'] input[name^='inp']"
);
for (var J = inpsToMonitor.length - 1; J >= 0; --J) {
inpsToMonitor[J].addEventListener ("change", adjustStyling, false);
inpsToMonitor[J].addEventListener ("keyup", adjustStyling, false);
inpsToMonitor[J].addEventListener ("focus", adjustStyling, false);
inpsToMonitor[J].addEventListener ("blur", adjustStyling, false);
inpsToMonitor[J].addEventListener ("mousedown", adjustStyling, false);
//-- Initial update. note that IE support is NOT needed.
var evt = document.createEvent ("HTMLEvents");
evt.initEvent ("change", false, true);
inpsToMonitor[J].dispatchEvent (evt);
}
function adjustStyling (zEvent) {
var inpVal = zEvent.target.value;
if (inpVal && inpVal.replace (/^\s+|\s+$/g, "") )
zEvent.target.style.background = "lime";
else
zEvent.target.style.background = "inherit";
}
<input type="text" onkeyup="this.setAttribute('value', this.value);" value="" />
将解决问题。
使用jQuery和CSS的简单技巧，就像这样：
像这样在HTML部分上进行操作：
是的！您可以使用带有值选择器的简单基本属性来完成此操作。
css无法做到这一点。要实现此功能，您必须使用JavaScript（例如input[value=''] {
background: red;
}
）。
[通常的CSS警告，如果可以修改HTML代码，则可能。如果将required属性添加到元素，则元素将根据控件的值是否为空匹配: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和:valid仅在工作草案级别的CSS文档中定义，但是在浏览器中的支持相当广泛，除了IE 10附带的是IE 10。
如果要使“空”包含仅包含空格的值，则可以添加属性:invalid。
（当前）没有CSS选择器可直接检测输入控件是否具有非空值，因此，如上所述，我们需要间接进行选择。
通常，CSS选择器引用markup，或者在某些情况下，引用通过脚本（客户端JavaScript）设置的元素属性，而不是用户操作。例如，:invalid匹配标记中具有空内容的元素；在这种意义上，所有pattern=.*\S.*元素都不可避免地为空。选择器:empty测试元素是否在标记中具有input属性，并具有空字符串作为其值。 [value=""]和value是相似的东西。它们不受实际用户输入的影响。
您可以使用:checked伪类。从技术上讲，占位符是必需的，但是您可以使用空格代替。
:indeterminate:placeholder-showninput:not(:placeholder-shown) {
border-color: green;
}
input:placeholder-shown {
border-color: red;
}和
<input placeholder="Text is required" />
<input placeholder=" " value="This one is valid" />
<input placeholder=" " />将起作用：-）
编辑：<input onkeyup="this.setAttribute('value', this.value);" />
您可以使用上面没有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;}
}
字段的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的问题是，当您编写某些内容然后将其删除时-作为HTML5规范的一部分，输入现在始终为红色-那么您需要使用上面编写的CSS来修复/覆盖它。] >
您可以简单地做required，而不做required
requiredCSS
<input type="text" placeholder="filter here" id="mytest" />代码笔：
#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：
使用JS和CSS：不是伪类