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 blue;
}
input[type="checkbox"]:checked {
  box-shadow: 0 0 5px 3px maroon;
}
option:checked {
  color: blue;
  background-color: pink;
}

親自試一試

CSS 語法

:checked {
  css declarations;
}

技術細節

瀏覽器支持

表格中的數字指定了完全支持該偽類的首個瀏覽器版本。