CSS：好玩的‘伪类’系列之——(:checked)

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/gavincz/article/details/89552614

:checked

定义：用来修改任何处于选中状态的HTML元素的样式，一般用在input元素的radio、checkbox属性和select元素下的option子元素中

触发条件：当元素的可选项中存在已被选中的情况，修改这些被选中的样式

兼容：基本全兼容

举个栗子

html代码：

  <!-- radio -->
  <input type="radio" name="my-radio" id='yes'>
  <label for='yes'>yes</label>
  <input type="radio" name="my-radio" id='no'>
  <label for='no'>no</label>
  <br/><br/><br/>
  <!-- checkbox -->
  <input type="checkbox" name="my-checkbox" id='Apple'>
  <label for='Apple'>Apple</label>
  <input type="checkbox" name="my-checkbox" id='Boy'>
  <label for='Boy'>Boy</label>
  <input type="checkbox" name="my-checkbox" id='Car'>
  <label for='Car'>Car</label>
  <input type="checkbox" name="my-checkbox" id='Door'>
  <label for='Door'>Door</label>
  <br/><br/><br/>
  <!-- option -->
  <select name="my-select" id="games">
    <option value="opt0"></option>
    <option value="opt1">KOF97</option>
    <option value="opt2">Tetris</option>
    <option value="opt3">Street Fighter</option>
  </select>

css代码：

label{
  cursor: pointer;
}
input[type='radio']:checked{
  box-shadow: 0 0 0 3px red;
}
input[type='radio']:checked+label{
  color: red;
}
input[type='checkbox']:checked{
  box-shadow: 0 0 0 3px blue;
}
input[type='checkbox']:checked+label{
  color: blue;
}
option:checked {
  color: red;
}

效果图：