CSS3 :checked ピクシェット

定義と使用法

CSS :checked ピクシェットを使用して、選択されたどのものにも一致します。 <input> または <option> 要素。

これは <input type="radio">、<input type="checkbox"> そして <select> 要素内の <option> に適用されます。

例

例 1

すべての選択された <input> 要素に細い赤い輪郭を設定します：

input:checked {
  outline: 1px solid red;
}

自分で試してみる

例 2

単一選択ボタン、複数選択ボックス、オプションが選択されたときに異なるスタイルを設定します：

input[type="radio"]:checked {
  box-shadow: 0 0 5px 3px 青色;
}
input[type="checkbox"]:checked {
  box-shadow: 0 0 5px 3px モカ色;
}
option:checked {
  color: blue;
  background-color: pink;
}

自分で試してみる

CSSの構文

:checked {
  cssの宣言;
}

技術的詳細

ブラウザのサポート

テーブルの数字は、そのパシフィクの完全なサポートが初めてのブラウザバージョンを指定しています。