有没有办法通过 CSS 检测输入是否有文本？我尝试过使用:empty伪类，也尝试过使用[value=""]，但都没有奏效。我似乎找不到一个单一的解决方案。
:checked我想这一定是可能的，考虑到我们有, 和的伪类:indeterminate，它们都是类似的东西。
请注意：我这样做是为了“时尚”风格，它不能使用 JavaScript。
另请注意，在客户端，在用户无法控制的页面上使用 Stylish。
问问题
274482 次
17 回答
309
您可以使用:placeholder-shown伪类。从技术上讲，占位符是必需的，但您可以使用空格代替。
input: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=" " />于 2016-02-09T21:39:58.423 回答
298
使用通常的 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和:invalid仅在工作草案级别的 CSS 文档中定义，但在浏览器中的支持相当广泛，除了在 IE 中，它与 IE 10 一起提供。
如果您想让“空”包含仅由空格组成的值，您可以添加属性pattern=.*\S.*。
（目前）没有用于直接检测输入控件是否具有非空值的 CSS 选择器，因此我们需要间接进行，如上所述。
通常，CSS 选择器指的是标记，或者在某些情况下，指的是通过脚本（客户端 JavaScript）设置的元素属性，而不是用户操作。例如，:empty匹配标记中内容为空的元素；从这个意义上说，所有input元素都不可避免地是空的。选择器[value=""]测试元素是否value在标记中具有该属性，并且其值是否为空字符串。和是类似的东西:checked。:indeterminate它们不受实际用户输入的影响。
于 2013-06-06T07:55:08.960 回答
73
Stylish无法做到这一点，因为 CSS 无法做到这一点。 CSS 没有<input>值的（伪）选择器。看：
选择:empty器仅引用子节点，而不是输入值。
[value=""] 确实有效；但仅适用于初始状态。这是因为节点的value 属性（CSS 看到的）与节点的value 属性不同（由用户或 DOM javascript 更改，并作为表单数据提交）。
除非您只关心初始状态，否则您必须使用用户脚本或 Greasemonkey 脚本。 幸运的是，这并不难。以下脚本可以在 Chrome 或安装了 Greasemonkey 或 Scriptish 的 Firefox 或任何支持用户脚本的浏览器（即大多数浏览器，IE 除外）中运行。
在这个 jsBin 页面上查看 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";
}
于 2013-06-06T08:34:59.927 回答
37
基本上每个人都在寻找的是：
较少的：
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;}
于 2017-05-03T21:54:14.443 回答
32
<input onkeyup="this.setAttribute('value', this.value);" />
和
input[value=""]
将工作 ：-）
编辑：http: //jsfiddle.net/XwZR2/
于 2014-06-17T07:57:22.493 回答
29
您可以使用placeholder上面写的不带required字段的技巧。
问题required是当你写了一些东西，然后删除它——作为 HTML5 规范的一部分，输入现在总是红色的——然后你需要一个上面写的 CSS 来修复/覆盖它。
你可以简单地做事w/orequired
<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;
}
于 2018-08-08T08:47:54.037 回答
29
您可以利用占位符并使用：
input:not(:placeholder-shown) {
border: 1px solid red;
}
于 2020-04-09T22:04:24.237 回答
14
简单的CSS：
input[value]:not([value=""])
如果输入已填满，此代码将在页面加载时应用给定的 css。
于 2018-03-15T13:12:07.903 回答
6
通过设置占位符的样式，您可以input[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;
}
于 2015-02-16T16:59:27.273 回答
5
使用 JS 和 CSS：不是伪类
input {
font-size: 13px;
padding: 5px;
width: 100px;
}
input[value=""] {
border: 2px solid #fa0000;
}
input:not([value=""]) {
border: 2px solid #fafa00;
}<input type="text" onkeyup="this.setAttribute('value', this.value);" value="" />
于 2016-10-27T11:08:57.700 回答
5
使用属性placeholder和伪类placeholder-shown是检测输入是否有文本的正确方法。
例子：
<input type="email" placeholder=" " required>
<label>Email</label>
input:focus ~ label,
input:not(:placeholder-shown) ~ label
{
top : -4em
left : -0.2em
font-size : 0.9em
}
于 2021-07-17T11:00:38.237 回答
4
有效的选择器可以解决问题。
<input type="text" class="myText" required="required" />
.myText {
//default style of input
}
.myText:valid {
//style when input has text
}
于 2016-09-26T12:32:29.277 回答
1
在 HTML 部分执行如下操作：
<input type="text" name="Example" placeholder="Example" required/>
必需的参数将要求它在输入字段中包含文本才能有效。
于 2013-06-06T02:50:24.277 回答
1
jQuery 和 CSS 的简单技巧 像这样：
查询：
$('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;
}
于 2014-05-06T18:41:40.103 回答
0
是的！您可以使用带有值选择器的简单基本属性来完成。
使用具有空白值的属性选择器并应用属性
input[value='']
input[value=''] {
background: red;
}
于 2018-07-31T07:52:12.507 回答
-5
这对于 css 是不可能的。要实现这一点，您必须使用 JavaScript（例如$("#input").val() == ""）。
于 2013-06-06T02:12:21.140 回答