:not(:empty)CSS选择器不起作用？

Question

我正熟悉这个特殊的CSS选择器,当我添加:not(:empty)它时不想工作.它似乎与其他选择器的任何组合都可以正常工作:

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

如果我删除该:not(:empty)部件,它就可以正常工作.即使我将选择器更改为input:not(:empty)它仍然不会选择输入文本的输入字段.这是坏了还是我不允许:empty在:not()选择器中使用？

我能想到的唯一另一件事是,浏览器仍然说元素是空的,因为它没有子元素,只说"价值".是否:empty选择不具有独立功能的输入元素与常规的元素？这似乎不太可能,因为:empty在场上使用并在其中键入内容将导致替代效果消失(因为它不再是空的).

在Firefox 8和Chrome中测试过.

Answer 1

作为void元素,HTML定义为"empty"时,<input>元素被视为空,因为所有void元素的内容模型始终为空.所以他们总是匹配:empty伪类,无论它们是否有价值.这也是它们的值由开始标记中的属性表示的原因,而不是开始和结束标记中的文本内容.

另外,从Selectors规范:

该:empty伪类代表有没有孩子在所有的元素.就文档树而言,只有数据具有非零长度的元素节点和内容节点(例如DOM文本节点,CDATA节点和实体引用)必须被视为影响空虚;

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

我不认为你可以<input>使用CSS动态地设置空字段的样式(即只要字段为空,并且一旦输入文本就不应用的规则).如果它们具有空属性()或完全缺少属性(),则可以选择最初为空的字段,但这是关于它的.valueinput[value=""]input:not([value])

Answer 2

它可以使用内联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" 
  onkeyup="this.setAttribute('value', this.value);" />

Answer 3

您可以尝试使用:占位符显示...

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>

没有很大的支持虽然... caniuse

Answer 4

.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>

Answer 5

您可以采用不同的方法; 省略使用: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>

有关

• 关于DOM Mutation Events的另一篇文章,建议使用input事件(DOM Mutation事件现在在DOM级别4中被弃用,并且已被DOM Mutation Observers取代).

免责声明:请注意,input事件目前是实验性的,可能没有得到广泛支持.

Answer 6

如果您想检查输入字段是否为空，您可以尝试以下操作：

超文本标记语言

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

CSS

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

由于在输入字段中输入内容时 Placeholder 会消失，因此我们可以通过CSS检查 Placeholder 是否可见

Answer 7

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

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