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

Question

提问by animuson

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:

我在这个特定的 CSS 选择器上玩得很开心，当我添加:not(:empty)它时它不想工作。它似乎适用于其他选择器的任意组合：

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 :emptywithin a :not()selector?

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

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 :emptyselector not have separate functionality for an input element versus a regular element? This doesn't seem probable though because using :emptyon a field and typing something into it will cause the alternate effects to go away (because it is no longer empty).

我能想到的唯一的另一件事是浏览器仍然说该元素是空的，因为它没有孩子，只是说一个“值”。:empty选择器是否没有针对输入元素与常规元素的单独功能？这似乎不太可能，因为:empty在字段上使用并在其中输入内容会导致替代效果消失（因为它不再是空的）。

Tested in Firefox 8 and Chrome.

在 Firefox 8 和 Chrome 中测试。

Answer 1

回答by BoltClock

Being a void element, an <input>element is considered emptyby the HTML definition of "empty", since the content model of all void elements is always empty. So they will always match the :emptypseudo-class, whether or not they have a value. This is also why their value is represented by an attribute in the start tag, rather than text content within start and end tags.

作为一个空元素，一个<input>元素被HTML 定义为“空”时被认为是空的，因为所有空元素的内容模型总是空的。所以它们总是匹配:empty伪类，不管它们是否有值。这也是为什么它们的值由开始标签中的属性表示，而不是开始和结束标签中的文本内容的原因。

Also, from the Selectors spec:

此外，从选择器规范：

The :emptypseudo-class represents an element that has no children at all. In terms of the document tree, only element nodes and content nodes (such as DOM text nodes, CDATA nodes, and entity references) whose data has a non-zero length must be considered as affecting emptiness;

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

Consequently, input:not(:empty)will never match anything in a proper HTML document. (It would still work in a hypothetical XML document that defines an <input>element that can accept text or child elements.)

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

I don't think you can style empty <input>fields dynamically using just CSS (i.e. rules that apply whenever a field is empty, and don't once text is entered). You can select initiallyempty fields if they have an empty valueattribute (input[value=""]) or lack the attribute altogether (input:not([value])), but that's about it.

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

Answer 2

回答by Mo.

It is possible with inline javascript onkeyup="this.setAttribute('value', this.value);"& input:not([value=""]):not(:focus):invalid

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

Demo: http://jsfiddle.net/mhsyfvv9/

演示：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);" />

Answer 3

回答by Gijs Erenstein

You could try using :placeholder-shown...

您可以尝试使用 :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>

no great support though... caniuse

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

Answer 4

回答by Amit

.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

回答by Eliran Malka

You may approach this differently; omit the use of the :emptypseudo-class and utilize inputevents to detect a significant value in the <input>field and style it accordingly:

你可能会以不同的方式处理这个问题；省略: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>

有关的

Another post on DOM Mutation Events, suggesting the use of inputEvents(DOM Mutation Events are now deprecated in DOM level 4, and have been replaced by DOM Mutation Observers).

另一篇关于 DOM Mutation Events 的帖子，建议使用inputEvents（DOM Mutation Events 现在在 DOM 级别 4 中已被弃用，并已被 DOM Mutation Observers 取代）。

Disclaimer:note that inputevents are currently experimental, and probably not widely supported.

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

Answer 6

回答by star

pure css solution

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

Answer 7

回答by Luca C.

Since placeholder disappear on input, you can use:

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

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

Answer 8

回答by vacsati

Another pure CSS solution

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

Answer 9

回答by SNEILΛ

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

// or 

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

Answer 10

回答by Andrew Kondratev

This should work in modern browsers:

这应该适用于现代浏览器：

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

It selects all inputs with value attribute and then select inputs with non empty value among them.

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

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

提问by animuson

回答by BoltClock

回答by Mo.

回答by Gijs Erenstein

回答by Amit

回答by Eliran Malka

Related

有关的

回答by star

回答by Luca C.

回答by vacsati

回答by SNEILΛ

回答by Andrew Kondratev

相关推荐

最近更新

标签

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

提问by animuson

回答by BoltClock

回答by Mo.

回答by Gijs Erenstein

回答by Amit

回答by Eliran Malka

Related

有关的

回答by star

回答by Luca C.

回答by vacsati

回答by SNEILΛ

回答by Andrew Kondratev

相关推荐

Html Angularjs 不会在 ng-view 中加载脚本

Html CSS中表格td中的中心图像

Html 在 Twitter Bootstrap 中更改 .table-bordered 的线条颜色

Html 默认选择选项为空白

相关推荐

最近更新

标签