是否有一种方法来检测输入是否有文本在它通过CSS?我尝试过使用:empty伪类,也尝试过使用[value=""],这两种方法都不起作用。我似乎找不到一个单一的解决方案。
我想这一定是可能的,考虑到我们有:checked和:indeterminate的伪类,两者都是类似的东西。
请注意:我这样做是为了“时尚”风格,它不能利用JavaScript。
还要注意,在客户端,在用户无法控制的页面上使用了Stylish。
是否有一种方法来检测输入是否有文本在它通过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
其他回答
这是有可能的,只要有通常的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是类似的东西。它们不受实际用户输入的影响。
这在css中是不可能的。要实现这一点,你必须使用JavaScript(例如$("#input").val() == "")。
使用JS和CSS:不是伪类
输入{ 字体大小:13 px; 填充:5 px; 宽度:100 px; } 输入(value = " ") { 边框:2px实体#fa0000; } 输入:没有((value = " ")) { 边框:2px实体#fafa00; } <input type="text" onkeyup="this. "setAttribute('value', this.value);" value="" /> . setAttribute('value', this.value);
您可以使用:占位符显示的伪类。从技术上讲,占位符是必需的,但您可以使用空格代替。
输入:没有(placeholder-shown) { 边框颜色:绿色; } 输入:placeholder-shown { 边框颜色:红色; } <input placeholder="Text is required" /> <input placeholder=" " value="This one is valid" /> <input placeholder=" " /> .
样式不能这样做,因为CSS不能这样做。CSS对于<input>值没有(伪)选择器。看到的:
W3C选择器规范 Mozilla/Firefox支持选择器 跨浏览器,支持CSS3表
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";
}