:not(:empty) CSS selector is not working?

I'm having a heck of a time with this particular CSS selector which does not want to work when I add :not(:empty) to it. It seems to work fine with any combination of the other selectors:

input:not(:empty):not(:focus):invalid { border-color: #A22; box-shadow: none }

If I remove the :not(:empty) part, it works just fine. Even if I change the selector to input:not(:empty) it still won't select input fields which have text typed into them. Is this broken or am I just not allowed to use :empty within a :not() selector?

The only other thing I can think of is that browsers are still saying that the element is empty because it has no children, just a "value" per say. Does the :empty selector not have separate functionality for an input element versus a regular element? This doesn't seem probable though because using :empty on a field and typing something into it will cause the alternate effects to go away (because it is no longer empty).

Tested in Firefox 8 and Chrome.

251968 次浏览
小开
最佳答案

作为一个 空心元件，一个 <input>元素被 HTML 定义为“空”的 空荡荡的，因为所有 void 元素的内容模型都是 永远都是空的。所以它们总是匹配 :empty伪类，无论它们是否有值。这也是为什么它们的值由开始标记中的属性表示，而不是由开始和结束标记中的文本内容表示。

此外，从 选择器规格:

:empty伪类表示一个根本没有子元素的元素。在文档树方面，只有元素节点和内容节点(例如 DOM 文本节点、 CDATA 节点和实体引用)的数据具有非零长度时才能考虑影响空性;

因此，input:not(:empty)永远不会匹配正确的 HTML 文档中的任何内容。(它仍然可以在一个假设的 XML 文档中工作，该文档定义了一个可以接受文本或子元素的 <input>元素。)

我不认为你可以仅仅使用 CSS 动态地设计空 <input>字段(例如，当字段为空时应用的规则，一旦输入文本就不应用)。如果 一开始空字段有一个空的 value属性(input[value=""])或者完全没有该属性(input:not([value])) ，您可以选择 一开始空字段，但仅此而已。

小开

您可以采用不同的方法; 忽略使用 :empty伪类，利用 input事件来检测 <input>字段中的重要值，然后相应地设置它的样式:

var inputs = document.getElementsByTagName('input');


for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.addEventListener('input', function() {
var bg = this.value ? 'green' : 'red';
this.style.backgroundColor = bg;
});
}
body {
padding: 40px;
}
#inputList li {
list-style-type: none;
padding-bottom: 1.5em;
}
#inputList li input,
#inputList li label {
float: left;
width: 10em;
}
#inputList li input {
color: white;
background-color: red;
}
#inputList li label {
text-align: right;
padding-right: 1em;
}
<ul id="inputList">
<li>
<label for="username">Enter User Name:</label>
<input type="text" id="username" />
</li>
<li>
<label for="password">Enter Password:</label>
<input type="password" id="password" />
</li>
</ul>

相关

免责声明: 注意，input事件 目前还处于试验阶段，可能没有得到广泛支持。不! 忘了它吧——它是 现在的生活水平。

小开

This should work in modern browsers:

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

它选择具有 value 属性的所有输入，然后在其中选择具有非空值的输入。

小开

可以使用内联的 javascript onkeyup="this.setAttribute('value', this.value);"和 input:not([value=""]):not(:focus):invalid

演示: http://jsfiddle.net/mhsyfvv9/

input:not([value=""]):not(:focus):invalid {
background-color: tomato;
}
<input type="email" value="" placeholder="valid mail" onchange="this.setAttribute('value', this.value);" />

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

这样可以工作，因为我们只在没有空字符串时才选择输入。

小开

你可以试试用: 占位符显示..。

input {
padding: 10px 15px;
font-size: 16px;
border-radius: 5px;
border: 2px solid lightblue;
outline: 0;
font-weight:bold;
transition: border-color 200ms;
font-family: sans-serif;
}


.validation {
opacity: 0;
font-size: 12px;
font-family: sans-serif;
color: crimson;
transition: opacity;
}


input:required:valid {
border-color: forestgreen;
}


input:required:invalid:not(:placeholder-shown) {
border-color: crimson;
}


input:required:invalid:not(:placeholder-shown) + .validation {
opacity: 1;
}



<input type="email" placeholder="e-mail" required>
<div class="validation">Not valid</span>

虽然没有很大的支持... 犬科动物

小开 

.floating-label-input {
position: relative;
height:60px;
}
.floating-label-input input {
width: 100%;
height: 100%;
position: relative;
background: transparent;
border: 0 none;
outline: none;
vertical-align: middle;
font-size: 20px;
font-weight: bold;
padding-top: 10px;
}
.floating-label-input label {
position: absolute;
top: calc(50% - 5px);
font-size: 22px;
left: 0;
color: #000;
transition: all 0.3s;
}
.floating-label-input input:focus ~ label, .floating-label-input input:focus ~ label, .floating-label-input input:valid ~ label {
top: 0;
font-size: 15px;
color: #33bb55;
}
.floating-label-input .line {
position: absolute;
height: 1px;
width: 100%;
bottom: 0;
background: #000;
left: 0;
}
.floating-label-input .line:after {
content: "";
display: block;
width: 0;
background: #33bb55;
height: 1px;
transition: all 0.5s;
}
.floating-label-input input:focus ~ .line:after, .floating-label-input input:focus ~ .line:after, .floating-label-input input:valid ~ .line:after {
width: 100%;
}
<div class="floating-label-input">
<input type="text" id="id" required/>
<label for="id" >User ID</label>
<span class="line"></span>
</div>

小开

纯 CSS 溶液

input::-webkit-input-placeholder {
opacity: 1;
-webkit-transition: opacity 0s;
transition: opacity 0s;
text-align: right;
}
/* Chrome <=56, Safari < 10 */
input:-moz-placeholder {
opacity: 1;
-moz-transition: opacity 0s;
transition: opacity 0s;
text-align: right;
}
/* FF 4-18 */
input::-moz-placeholder {
opacity: 1;
-moz-transition: opacity 0s;
transition: opacity 0s;
text-align: right;
}
/* FF 19-51 */
input:-ms-input-placeholder {
opacity: 1;
-ms-transition: opacity 0s;
transition: opacity 0s;
text-align: right;
}
/* IE 10+ */
input::placeholder {
opacity: 1;
transition: opacity 0s;
text-align: right;
}
/* Modern Browsers */


*:focus::-webkit-input-placeholder {
opacity: 0;
text-align: left;
}
/* Chrome <=56, Safari < 10 */
*:focus:-moz-placeholder {
opacity: 0;
text-align: left;
}
/* FF 4-18 */
*:focus::-moz-placeholder {
opacity: 0;
text-align: left;
}
/* FF 19-50 */
*:focus:-ms-input-placeholder {
opacity: 0;
text-align: left;
}
/* IE 10+ */
*:focus::placeholder {
opacity: 0;
text-align: left;
}
/* Modern Browsers */


input:focus {
text-align: left;
}
小开

由于占位符在输入时消失，您可以使用:

input:placeholder-shown{
//rules for not empty input
}
小开

另一个纯 CSS 解决方案

.form{
position:relative;
display:inline-block;
}
.form input{
margin-top:10px;
}
.form label{
position:absolute;
left:0;
top:0;
opacity:0;
transition:all 1s ease;
}
input:not(:placeholder-shown) + label{
top:-10px;
opacity:1;
}
<div class="form">
<input type="text" id="inputFName" placeholder="Firstname">
<label class="label" for="inputFName">Firstname</label>
</div>
<div class="form">
<input type="text" id="inputLName" placeholder="Lastname">
<label class="label" for="inputLName">Lastname</label>
</div>

小开

您可以在您的输入中使用 & : void，这很有用。

小开

If you want to check whether the input field is empty or not you can try this:

超文本标示语言

<input type="text" placeholder='Placeholder'/>

CSS

input:not(:placeholder-shown){
background-color: red;
}

因为当在输入字段中输入某些内容时，占位符会消失，所以我们可以通过 CSS检查占位符是否可见


提交答案