Wejście pseudoklas CSS: nie (wyłączone) nie: [typ = „wyślij”]: fokus

138

Chcę zastosować css dla elementów wejściowych i chcę to zrobić tylko dla wejść, które nie są wyłączone i nie są typu przesyłania, poniżej css nie działa, może jeśli ktoś może mi wytłumaczyć, jak należy to dodać.

input:not(disabled)not:[type="submit"]:focus{
box-shadow:0 0 2px 0 #0066FF;
-webkit-box-shadow:0 0 4px 0 #66A3FF;
}
css css-selectors pseudo-class BurebistaRuler
źródło

Odpowiedzi:

284

Zamiast:

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

Posługiwać się:

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

disabled jest atrybutem, więc potrzebuje nawiasów i wydaje się, że pomieszano / brakowało dwukropków i nawiasów :not() selektorze .

Demo: http://jsfiddle.net/HSKPx/

Jedna uwaga: mogę się mylić, ale nie sądzę, aby disableddane wejściowe mogły normalnie zostać skupione, więc ta część może być zbędna.

Alternatywnie użyj :enabled

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

Ponownie, nie przychodzi mi do głowy przypadek, w którym wyłączone wejście może uzyskać fokus, więc wydaje się to niepotrzebne.

Wesley Murch
źródło
41
: not ([disabled]) to bardzo rozwlekły sposób pisania: enabled developer.mozilla.org/en-US/docs/Web/CSS/:enabled
Adria
@Adria nie działała dla mnie z <a>. Miał jeden z <a disabled='disabled'> i musiałem specjalnie użyć selektora: disabled. FF65.
Robert Niestroj,
z jakiegoś powodu ": enabled" nie działał np. 11 dla mnie
SLCH000
Czy jest jakaś różnica między używaniem :not([disabled])VS. :not(:disabled)?
bubencode
15

Twoja składnia jest dość skomplikowana.

Zmień to:

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

do:

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

Wygląda na to, że wiele osób nie zdaje sobie sprawy z tego :enabledi :disabledsą prawidłowymi selektorami CSS ...

Gavin
źródło
5
Dlaczego nie skrócić go dalej do input:enabled:not([type="submit"]):focus{?
Sean the Bean
7

Masz kilka literówek do wyboru. Powinno być:input:not([disabled]):not([type="submit"]):focus

Zobacz ten jsFiddle, aby uzyskać dowód słuszności koncepcji. Na marginesie, jeśli usunę właściwość „background-color”, cień pola przestanie działać. Nie pewny dlaczego.

PatrikAkerstrand
źródło