CSS - 伪类 :checked

CSS 伪类选择器 :checked 表示任何 复选框 (<input type="checkbox">)、单选按钮 (<input type="radio">) 或 选项 (<option> 在 <select> 中) 元素，这些元素已选中或切换到开启状态。

此状态可以通过选中/选择或取消选中/取消选择元素来启用或禁用。

语法

:checked {
   /* ... */
}

CSS :checked 示例

以下是一个 :checked 伪类用于 单选按钮 的示例。当单选按钮被选中或勾选时，选中的单选按钮周围会应用盒阴影样式。

<html>
<head>
<style>
   div {
      margin: 10px;
      padding: 10px;
      font-size: 20px;
      border: 3px solid black;
      width: 200px;
      height: 45px;
      box-sizing: border-box;
   }

   input[type="radio"]:checked {
      box-shadow: 0 0 0 8px red;
   }
</style>
</head>
<body>
   <h2>:checked example - radio</h2>
   <div>
      <input type="radio" name="my-input" id="yes">
      <label for="yes">Yes</label>
      <input type="radio" name="my-input" id="no">
      <label for="no">No</label>
   </div>
</body>
</html>

以下是一个 :checked 伪类用于 复选框 的示例。当复选框被选中时，盒阴影样式以及颜色和边框样式将应用于复选框及其标签。

<html>
<head>
<style>
   div {
      margin: 10px;
      font-size: 20px;
   }

   input:checked + label {
      color: royalblue;
      border: 3px solid red;
      padding: 10px;
   }

   input[type="checkbox"]:checked {
      box-shadow: 0 0 0 6px pink;
   }
</style>
</head>
<body>
   <h2>:checked example - checkbox</h2>
   <div>
      <p>Check and uncheck me to see the change</p>
      <input type="checkbox" name="my-checkbox" id="opt-in">
      <label for="opt-in">Check!</label>
   </div>
</body>
</html>

以下是一个 :checked 伪类用于选项的示例。当从列表中选择一个选项时，背景颜色将更改为浅黄色，字体颜色将更改为红色。

<html>
<head>
<style>
   select {
      margin: 10px;
      font-size: 20px;
   }

   option:checked {
      background-color: lightyellow;
      color: red;
   }
</style>
</head>
<body>
   <h2>:checked example - option</h2>
   <div>
   <h3>Ice cream flavors:</h3>
      <select name="sample-select" id="icecream-flav">
         <option value="opt3">Butterscotch</option>
         <option value="opt2">Chocolate</option>
         <option value="opt3">Cream n Cookie</option>
         <option value="opt3">Hazelnut</option>
         <option value="opt3">Roasted Almond</option>
         <option value="opt1">Strawberry</option>
      </select>
   </div>   
</body>
</html>

打印页面