检测输入是否有文本在它使用CSS -在一个页面上，我正在访问和不控制?

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

在HTML部分这样做:

<input type="text" name="Example" placeholder="Example" required/>

为了有效，必需的参数将要求它在输入字段中有文本。

这是有可能的，只要有通常的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是类似的东西。它们不受实际用户输入的影响。

时尚的不能这样做，因为CSS不能这样做。CSS没有(伪)<input>值的选择器。看:

• W3C选择器规范
• Mozilla/Firefox支持的选择器
• 跨浏览器，CSS3支持表 . bb0

:empty选择器只指向子节点，不指向输入值 [value=""] 做工作;但只适用于最初的状态。这是因为节点的value 属性 (CSS看到的)与节点的value 财产(由用户或DOM javascript更改，并作为表单数据提交)不相同

除非你只关心初始状态，幸运的是这并不难。以下脚本将在Chrome，或安装了Greasemonkey或Scriptish的Firefox中工作，或在任何支持用户脚本的浏览器中工作(即大多数浏览器，除了IE)。

在this jsBin page . txt中可以看到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";
}

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 onkeyup="this.setAttribute('value', this.value);" />

而且

input[value=""]

将工作:-)

编辑:http://jsfiddle.net/XwZR2/

你可以通过样式占位符来根据输入是否有文本来不同地样式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;
}

例如:http://fiddlesalad.com/scss/input-placeholder-css

你可以使用: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=" " />

有效的选择器将完成这个任务。

<input type="text" class="myText" required="required" />


.myText {
//default style of input
}
.myText:valid {
//style when input has text
}

使用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="" />

基本上每个人都在寻找的是:

少:

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;}

简单的css:

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

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

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

使用空值的属性选择器并应用属性 input[value=''] < / >强

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