:checked
版本:CSS3
CSS 伪类:checked
选择器表示任何处于选中状态的radio(<input type="radio">
), checkbox(<input type="checkbox">
)或(<select>
)元素中的option HTML元素("option")。
语法:
E :checked{sRules}
匹配用户界面上处于选中状态的元素E。(用于<input>
为radio与checkbox时)
/* 匹配任意被勾选/选中的radio(单选按钮),checkbox(复选框),或者option(select中的一项) */ :checked { margin-left: 25px; border: 1px solid blue; }
用户通过勾选/选中元素或取消勾选/取消选中,来改变该元素的:checked
状态。
Note:因为浏览器经常将<option>
视为可替换元素,因此不同的浏览器通过:checked
伪类渲染出来的效果也不尽相同.
浏览器支持
IE9+以及新版浏览器都支持 |
例子
//html <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> <div> <input type="checkbox" name="my-checkbox" id="opt-in"> <label for="opt-in">check me!</label> </div> <select name="my-select" id="fruit"> <option value="opt1">apples</option> <option value="opt2">grapes</option> <option value="opt3">pears</option> </select> //CSS div, select { margin: 8px; } /* labels for checked inputs */ input:checked + label { color: red; } /* radio element, when checked */ input[type="radio"]:checked { box-shadow: 0 0 0 3px orange; } /* checkbox element, when checked */ input[type="checkbox"]:checked { box-shadow: 0 0 0 3px hotpink; } /* option elements, when selected */ option:checked { box-shadow: 0 0 0 3px lime; color: red; }
这个例子利用了:checked
伪类,让用户基于复选框的状态切换内容,而无需使用JavaScript。
//html <input type="checkbox" id="expand-toggle" /> <table> <thead> <tr><th>column #1</th><th>column #2</th><th>column #3</th></tr> </thead> <tbody> <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr> <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr> <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr> <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr> <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr> </tbody> </table> <label for="expand-toggle" id="expand-btn">toggle hidden rows</label> //CSS /* hide the toggle checkbox */ #expand-toggle { display: none; } /* hide expandable content by default */ .expandable { visibility: collapse; background: #ddd; } /* style the button */ #expand-btn { display: inline-block; margin-top: 12px; padding: 5px 11px; background-color: #ff7; border: 1px solid; border-radius: 3px; } /* show hidden content when the checkbox is checked */ #expand-toggle:checked ~ * .expandable { visibility: visible; } /* style the button when the checkbox is checked */ #expand-toggle:checked ~ #expand-btn { background-color: #ccc; }
当<label for="expand-toggle" id="expand-btn">toggle hidden rows</label>
被点击时,其关联的<input type="checkbox"id="expand-toggle"/>
被激活,并且处于选中checked状态。
column #1 | column #2 | column #3 |
---|---|---|
[more text] | [more text] | [more text] |
[cell text] | [cell text] | [cell text] |
[cell text] | [cell text] | [cell text] |
[more text] | [more text] | [more text] |
[more text] | [more text] | [more text] |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> input:checked{ opacity:0.3; } </style> </head> <body> <p>给选中的输入元素设置透明度</p> <input type="radio" checked="checked" value="male" name="gender" />male<br> <input type="radio" value="female" name="gender" />female<br> </body> </html>
给选中的输入元素设置透明度
malefemale