web-dev-qa-db-fra.com

: pas (: vide) le sélecteur CSS ne fonctionne pas?

Je passe énormément de temps avec ce sélecteur CSS particulier qui ne veut pas fonctionner lorsque j'y ajoute :not(:empty). Cela semble fonctionner correctement avec n'importe quelle combinaison des autres sélecteurs:

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

Si je supprime la partie :not(:empty), cela fonctionne très bien. Même si je change le sélecteur en input:not(:empty), il ne sélectionnera toujours pas les champs de saisie contenant du texte. Est-ce cassé ou est-ce que je ne suis pas autorisé à utiliser :empty dans un sélecteur :not()?

La seule autre chose à laquelle je peux penser est que les navigateurs disent toujours que l'élément est vide car il n'a pas d'enfants, juste une "valeur" à proprement parler. Le sélecteur :empty n'a-t-il pas une fonctionnalité distincte pour un élément d'entrée par rapport à un élément normal? Cela ne semble toutefois pas probable, car utiliser :empty dans un champ et y saisir quelque chose entraînera la disparition des effets alternatifs (car il n'est plus vide).

Testé sous Firefox 8 et Chrome.

htmlcsscss3css-selectors
78
animuson

Étant un élément vide , un élément <input> est considéré comme vide par la définition HTML de "vide", car le modèle de contenu de tous les éléments void est toujours vide. Ainsi, ils correspondront toujours à la pseudo-classe :empty, qu’ils aient ou non une valeur. C'est aussi pourquoi leur valeur est représentée par un attribut dans la balise de début, plutôt que par le contenu textuel dans les balises de début et de fin.

En outre, à partir de la spéc. Sélecteurs :

La pseudo-classe :empty représente un élément qui n'a aucun enfant. En termes d'arborescence de documents, seuls les nœuds d'élément et les nœuds de contenu (tels que les nœuds de texte DOM, les nœuds CDATA et les références d'entité) dont les données ont une longueur non nulle doivent être considérés comme affectant la vacuité;

Par conséquent, input:not(:empty) ne correspondra jamais à quoi que ce soit dans un document HTML approprié. (Cela fonctionnerait toujours dans un document XML hypothétique qui définit un élément <input> pouvant accepter du texte ou des éléments enfants.)

Je ne pense pas que vous puissiez styler les champs <input> vides de manière dynamique en utilisant uniquement du CSS (c'est-à-dire des règles qui s'appliquent chaque fois qu'un champ est vide et qui ne le sont pas une fois le texte saisi). Vous pouvez sélectionner initialement des champs vides s'ils ont un attribut value vide (input[value=""]) ou s'ils n'ont pas l'attribut complet (input:not([value])), mais c'est à peu près tout.

130
BoltClock

Il est possible avec onkeyup="this.setAttribute('value', this.value);" & input:not([value=""]):not(:focus):invalid javascript en ligne 

Démo: 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);" />

34
Mo.

Vous pouvez essayer d'utiliser: 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>

pas grand soutien cependant ... caniuse

25
Gijs Erenstein

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

7
Amit

Vous pouvez aborder cela différemment. omettez l'utilisation de la pseudo-classe :empty et utilisez les événements input pour détecter une valeur significative dans le champ <input> et attribuez-lui un style en conséquence:

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>

En relation

Avertissement: notez que input événements sont actuellement expérimentaux , et probablement pas largement pris en charge.}

7
Eliran Malka

solution css pure

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