Entrée de pseudo-classes CSS: non (désactivé) non: [type = “submit”]: focus


138

Je veux appliquer du CSS pour les éléments d'entrée et je veux le faire uniquement pour les entrées qui ne sont pas désactivées et ne sont pas de type soumettre, ci-dessous le CSS ne fonctionne pas, peut-être si quelqu'un peut m'expliquer comment cela doit être ajouté.

input:not(disabled)not:[type="submit"]:focus{
box-shadow:0 0 2px 0 #0066FF;
-webkit-box-shadow:0 0 4px 0 #66A3FF;
}

Réponses:


285

Au lieu de:

input:not(disabled)not:[type="submit"]:focus {}

Utilisation:

input:not([disabled]):not([type="submit"]):focus {}

disabled est un attribut, il a donc besoin des crochets, et vous semblez avoir des deux-points et des parenthèses mélangés / manquants sur le :not() sélecteur.

Démo: http://jsfiddle.net/HSKPx/

Une chose à noter: je me trompe peut-être, mais je ne pense pas que les disabledentrées puissent normalement recevoir le focus, donc cette partie peut être redondante.

Sinon, utilisez :enabled

input:enabled:not([type="submit"]):focus { /* styles here */ }

Encore une fois, je ne peux pas penser à un cas où l'entrée désactivée peut recevoir le focus, donc cela semble inutile.


41
: not ([disabled]) est une manière très verbeuse d'écrire: enabled developer.mozilla.org/en-US/docs/Web/CSS/:enabled
Adria

@Adria n'a pas fonctionné pour moi avec les <a>. J'en ai eu un avec <a disabled='disabled'> et j'ai dû utiliser spécifiquement le sélecteur: disabled. FF65.
Robert Niestroj

pour une raison quelconque ": enabled" ne fonctionnait pas dans ie 11 pour moi
SLCH000

Y a-t-il une différence entre l'utilisation de :not([disabled])VS. :not(:disabled)?
bubencode

15

Votre syntaxe est assez délicate.

Change ça:

input:not(disabled)not:[type="submit"]:focus{

à:

input:not(:disabled):not([type="submit"]):focus{

Il semble que beaucoup de gens ne réalisent pas :enabledet :disabledsont des sélecteurs CSS valides ...


5
Pourquoi ne pas le raccourcir davantage input:enabled:not([type="submit"]):focus{?
Sean the Bean

7

Vous avez quelques fautes de frappe dans votre sélection. Ça devrait être:input:not([disabled]):not([type="submit"]):focus

Voir ce jsFiddle pour une preuve de concept. Sur une note latérale, si j'ai supprimé la propriété "background-color", alors l'ombre de la boîte ne fonctionne plus. Pas certain de pourquoi.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.