web-dev-qa-db-ja.com

CSS：disabled疑似クラスまたは[disabled]属性セレクターを使用すべきですか、それとも意見の問題ですか？

無効な入力のスタイルを設定しようとしています。使うことができます：

.myInput[disabled] { }

または

.myInput:disabled { }

属性セレクターは現代のCSS3の方法であり、前進する方法ですか？以前は擬似クラスを使用していましたが、それらが古い方法でサポートされないかどうか、または両方が同等であり、あなたが好きなものを使用できるかどうかに関する情報を見つけることができません。

古いブラウザー（イントラネットアプリケーション）をサポートする必要はありません。

  • 属性はより新しく、より良いです
  • 擬似クラスはまだ行く方法です
  • あなたが一番好きな方
  • どちらか一方を使用する技術的な理由があります
csscss3css-selectorspseudo-classdisabled-input
56
Peter

Internet Explorer 10および11は、一部の要素で:disabled擬似クラスを認識できず、属性セレクター構文でのみ正常に機能することがわかりました。

#test1:disabled { color: graytext; }
#test2[disabled] { color: graytext; }
<form>
<fieldset id="test1" disabled>:disabled</fieldset>
<fieldset id="test2" disabled>[disabled]</fieldset>
</form>

上記のコードは、IEのように表示されます：

input要素のみをスタイリングしている限り、どちらの方法でも大丈夫です。それでも、サポートするすべてのブラウザーで最終結果をテストすることをお勧めします。

14
GOTO 0