: not (: leer) CSS-Selektor funktioniert nicht?

Ich habe eine verdammt gute Zeit mit diesem speziellen CSS-Selektor, der nicht funktionieren möchte, wenn ich ihn hinzufüge :not(:empty). Es scheint gut mit jeder Kombination der anderen Selektoren zu funktionieren:

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

Wenn ich das :not(:empty)Teil entferne , funktioniert es einwandfrei. Selbst wenn ich den Selektor auf input:not(:empty)ihn ändere, werden keine Eingabefelder ausgewählt, in die Text eingegeben wurde. Ist das kaputt oder darf ich es einfach nicht :emptyin einem :not()Selektor verwenden?

Das einzige andere, woran ich denken kann, ist, dass Browser immer noch sagen, dass das Element leer ist, weil es keine untergeordneten Elemente hat, sondern nur einen "Wert" pro Wort. Verfügt der :emptySelektor nicht über eine separate Funktionalität für ein Eingabeelement im Vergleich zu einem regulären Element? Dies scheint jedoch nicht wahrscheinlich zu sein, da bei Verwendung :emptyeines Felds und Eingabe etwas dazu führen, dass die alternativen Effekte verschwinden (weil es nicht mehr leer ist).

Getestet in Firefox 8 und Chrome.

Als nichtiges Element wird ein <input>Element von der HTML-Definition von "leer" als leer betrachtet , da das Inhaltsmodell aller leeren Elemente immer leer ist . Sie stimmen also immer mit der :emptyPseudoklasse überein , unabhängig davon, ob sie einen Wert haben oder nicht. Aus diesem Grund wird ihr Wert auch durch ein Attribut im Start-Tag und nicht durch Textinhalt in Start- und End-Tags dargestellt.

Auch aus der Selectors-Spezifikation :

Die :emptyPseudoklasse repräsentiert ein Element, das überhaupt keine Kinder hat. In Bezug auf den Dokumentbaum müssen nur Elementknoten und Inhaltsknoten (wie DOM-Textknoten, CDATA-Knoten und Entitätsreferenzen), deren Daten eine Länge ungleich Null haben, als die Leere beeinflussend betrachtet werden.

Folglich input:not(:empty)wird niemals etwas in einem richtigen HTML-Dokument übereinstimmen. (Es würde immer noch in einem hypothetischen XML-Dokument funktionieren, das ein <input>Element definiert , das Text oder untergeordnete Elemente akzeptieren kann.)

Ich glaube nicht, dass Sie leere <input>Felder dynamisch mit nur CSS formatieren können (dh Regeln, die gelten, wenn ein Feld leer ist und nicht, wenn Text eingegeben wird). Sie können anfänglich leere Felder auswählen, wenn sie ein leeres valueAttribut haben ( input[value=""]) oder das Attribut insgesamt fehlt ( input:not([value])), aber das war es auch schon.

Es ist mit Inline-Javascript onkeyup="this.setAttribute('value', this.value);"& möglichinput:not([value=""]):not(:focus):invalid

Demo: 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);" />

Sie könnten versuchen, Folgendes zu verwenden: Platzhalter angezeigt ...

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>

Keine große Unterstützung ... caniuse

Sie können dies anders angehen; Lassen Sie die Verwendung der :emptyPseudoklasse aus und verwenden Sie inputEreignisse, um einen signifikanten Wert im <input>Feld zu erkennen und entsprechend zu formatieren :

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>

verbunden

• Ein weiterer Beitrag zu DOM-Mutationsereignissen, der die Verwendung von inputEreignissen vorschlägt (DOM-Mutationsereignisse sind jetzt in DOM-Stufe 4 veraltet und wurden durch DOM-Mutationsbeobachter ersetzt).

Haftungsausschluss: Beachten Sie, dass inputEreignisse derzeit experimentell sind und wahrscheinlich nicht allgemein unterstützt werden.

Da Platzhalter bei der Eingabe verschwinden, können Sie Folgendes verwenden:

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

reine CSS-Lösung

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

Eine weitere reine CSS-Lösung

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

Dies sollte in modernen Browsern funktionieren:

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

Es wählt alle Eingaben mit dem Wertattribut aus und wählt dann Eingaben mit nicht leerem Wert aus.

input:not([value=""])

Dies funktioniert, weil wir die Eingabe nur auswählen, wenn keine leere Zeichenfolge vorhanden ist.

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

// or 

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