web-dev-qa-db-fra.com

Entrée pseudo-classes css: pas (désactivé) pas: [type = "submit"]: focus

Je veux appliquer quelques css pour les éléments d’entrée et je ne veux le faire que pour les entrées qui ne sont pas désactivées et qui ne sont pas du type de soumission. En dessous, css ne fonctionne pas, peut-être que 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;
}
113
BurebistaRuler

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 mélangé/fait disparaître les deux points et les parenthèses sur le sélecteur :not().

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

Une chose à noter: je me trompe peut-être, mais je ne pense pas que les entrées disabled puissent normalement recevoir le focus, de sorte que 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ù une entrée invalide peut recevoir le focus, donc cela semble inutile.

234
Wesley Murch

Votre syntaxe est plutôt 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 se rendent pas compte que :enabled et :disabled sont des sélecteurs CSS valides ...

15
Gavin

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

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

7
PatrikAkerstrand