Css疑似クラスinput：not（disabled）not：[type =“ submit”]：focus

138

いくつかのcssを入力要素に適用したいのですが、無効にせず、送信タイプではない入力にのみ適用したいのですが、以下のcssが機能していません。

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
ソース

284

の代わりに：

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

使用する：

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

disabledは属性であるため、大括弧が必要であり、:not()セレクターでコロンと括弧を混同/欠落しているようです。

注意すべき点の1つ：私は間違っているかもしれませんが、disabled入力は通常フォーカスを受け取ることができないので、その部分は冗長になる可能性があります。

または、 :enabled

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

繰り返しますが、無効化された入力がフォーカスを受け取ることができるケースは考えられないので、それは不必要に思えます。

— ウェズリー・マーチ
ソース

41

：not（[disabled]）は、：enabled developer.mozilla.org/en-US/docs/Web/CSS/:enabled

— Adria

@Adriaは、<a>で機能しませんでした。<a disabled='disabled'>があり、特に：disabledセレクターを使用する必要がありました。FF65。

— Robert Niestroj 2018

何らかの理由で "：enabled"が

— IE

:not([disabled])VSの使用との違いはありますか？:not(:disabled)？

— bubencode、

15

構文はかなり馬鹿げています。

これを変える：

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

に：

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

多くの人が気づいておらず:enabled、:disabled有効なCSSセレクターであるようです...

— ギャビン
ソース

5

それをさらに短くしてみませんinput:enabled:not([type="submit"]):focus{か？

— Sean the Bean

7

選択にいくつかのタイプミスがあります。そのはず：input:not([disabled]):not([type="submit"]):focus

概念実証については、このjsFiddleを参照してください。余談ですが、「background-color」プロパティを削除すると、ボックスの影が機能しなくなります。なぜだかわかりません。

— PatrikAkerstrand
ソース