CSS:好玩的‘伪类’系列之——(:checked)
: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;
}
效果图: