：not（：empty）CSS选择器不起作用？

92

我在使用这个特定的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中进行了测试。

html css css-selectors

— 动漫
source

您可以发布相关代码吗？

— Virendra）

2

我可以给你一部分的API参考:empty选择：“其他的一些元素，而另一方面，是空的（即有没有孩子）的定义：<input>，<img>，<br>，和<hr>，例如”。

— 大卫说要恢复莫妮卡

@Virendra：这是相关的代码，但是我已经在其中添加了实际的CSS规则。如果删除:not(:empty)，则红色边框会针对未聚焦但无效的输入按预期工作。

— animuson

149

作为void元素，HTML定义“空” 将<input>元素视为空，因为所有void元素的内容模型始终为空。因此:empty，无论它们是否有值，它们都将始终与伪类匹配。这也是为什么其值由开始标签中的属性表示，而不是由开始标签和结束标签中的文本内容表示的原因。

另外，根据Selectors规范：

该:empty伪类表示，在所有没有孩子的元素。就文档树而言，只有其数据长度为非零的元素节点和内容节点（例如DOM文本节点，CDATA节点和实体引用）才应被视为影响空度。

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

我认为您不能<input>仅使用CSS来动态设置空字段的样式（即，只要字段为空，并且一旦输入文本就不应用规则）。如果它们具有空属性（）或完全没有属性（），则可以选择初始为空的字段，仅此而已。valueinput[value=""]input:not([value])

— BoltClock
source

嗯，我不记得我为使效果消失而仅仅做了些什么input:empty。也许我打错了，谁知道。

— animuson

9

在答案的最后一段中，input如果可以required在HTML标记中使用属性，则可以动态设置元素的样式（在足够现代的浏览器中）。然后，您可以在CSS中使用:valid和:invalid测试控件的非空值与空值。见stackoverflow.com/questions/16952526/...

— 尤卡K. Korpela

1

@ JukkaK.Korpela，除非您也使用pattern属性。

— WORMSS

2

input：not（[[value ='']）将选择一个带有值的输入;）

— Chris Love19年

@Chris Love：具有初始（页面加载）值的输入。

— BoltClock

43

内联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);" />

展开摘要

— 莫
source

onchange在这种情况下，活动不是更好吗？因为您也可以使用Right click > Cut（例如）编辑输入值。经过测试：效果很好。

— Derk Jan Speelman，

38

您可以尝试使用：placeholder-shown ...

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

— 吉斯·爱伦斯坦
source

1

虽然很好的支持... caniuse

— Reggie Pinkham

好的老式Internet Explorer（Y）

— rorymorris89'5

@ rorymorris89甚至最新的EDGE版本不支持:-(

— 密苏里州

12

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

展开摘要

— 阿米特
source

7

您可能采取不同的方法；省略: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突变事件的另一篇文章建议使用input事件（DOM突变事件现在在DOM级别4中已弃用，并已由DOM突变观察者代替）。

免责声明：请注意，input事件目前处于试验阶段，可能尚未得到广泛支持。

— 埃里兰·马尔卡（Eliran Malka）
source

3

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

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

— 卢卡C.
source

2

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

— 星
source

0

另一个纯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>

展开摘要

— 瓦萨蒂
source

-1

在现代浏览器中应该可以使用：

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

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

— 安德鲁·康德拉捷夫
source

10

但是，这不是动态的。它只会选择属性定义为的输入元素value=""。在框中键入/删除内容不会引起任何更改。

— animuson

-1

input:not([value=""])

之所以有效，是因为我们仅在没有空字符串的情况下才选择输入。

— 安东
source

-1

input:not(:invalid){
 border: 1px red solid;
}

// or 

input:not(:focus):not(:invalid){
 border: 1px red solid;
}

— 斯尼拉
source

1

在为已有11个问题的已有十个问题的答案添加答案时，一定要添加一些有关答案的方式和原因的解释，并指出答案要解决的问题的新方面，这一点非常重要。如果答案取决于自提出问题以来发生的变化，那么也要指出这一点。

— 杰森·艾勒