Le sélecteur CSS :not(:empty) ne fonctionne pas ?

Question

J'ai beaucoup de mal avec ce sélecteur CSS particulier qui ne veut pas fonctionner lorsque j'ajoute :not(:empty) à elle. Il 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 retire le :not(:empty) il fonctionne très bien. Même si je change le sélecteur en input:not(:empty) il ne sélectionne toujours pas les champs de saisie dans lesquels du texte a été saisi. Est-ce que c'est cassé ou est-ce que je n'ai pas le droit d'utiliser la fonction :empty à l'intérieur d'un :not() sélecteur ?

La seule autre chose à laquelle je peux penser est que les navigateurs continuent à dire que l'élément est vide parce qu'il n'a pas d'enfants, juste une "valeur" par exemple. Est-ce que l'élément :empty Le sélecteur n'a-t-il pas une fonctionnalité distincte pour un élément d'entrée et un élément normal ? Cela ne semble pas probable car l'utilisation de :empty sur un champ et taper quelque chose dedans fera disparaître les effets alternatifs (parce que le champ n'est plus vide).

Testé avec Firefox 8 et Chrome.

Answer 1

Puisque les espaces réservés disparaissent lors de la saisie, vous pouvez utiliser :

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

Answer 2

Si vous souhaitez vérifier si le champ de saisie est vide ou non, vous pouvez essayer ceci :

HTML

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

CSS

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

Comme l'espace réservé disparaît lorsque l'on tape quelque chose dans le champ de saisie, nous pouvons vérifier si l'espace réservé est visible ou non grâce à la fonction CSS

Answer 3

Une autre solution purement 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 4

J'essayais de copier le login Gmail. Lorsque l'on clique sur "Email ou téléphone" et que l'on tape quelque chose, l'étiquette est translatéeY(-38px) et mise à l'échelle(0.75).
Ce que j'ai fait

<input type='email' class='email' placeholder=' ' />

Ensuite, dans mon CSS

input:not(:placeholder-shown){
//put my styles here and I got the expected results
}

Si vous l'essayez et que vous rencontrez un problème. Partagez-le s'il vous plaît.

Answer 5

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