在表單元素中,單選按鈕radio和復選框checkbox都具有“選中”和“未選中”狀態。在CSS3中,我們可以通過使用:checked選擇器來定義選中時的CSS樣式。
暫時只有Opera浏覽器支持:checked選擇器。
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3 :checked選擇器</title> <style type="text/css"> input:checked { background-color:red; } </style> </head> <body> <form name="form1" method="post" action="index.html"> 性別: <input type="radio" name="Question1" value="boy" checked="checked"/>男 <input type="radio" name="Question1" value="girl"/>女<br/> 你喜歡的水果:<br /> <input id="checkbox1" type="checkbox" checked="checked"/><label for="checkbox1">蘋果</label><br/> <input id="checkbox2" type="checkbox" /><label for="checkbox2">香蕉</label><br/> <input id="checkbox3" type="checkbox" /><label for="checkbox3">西瓜</label><br/> <input id="checkbox4" type="checkbox" /><label for="checkbox4">鳳梨</label> </form> </body> </html>
在浏覽器預覽效果如下:
分析:
暫時只有opera浏覽器支持:checked選擇器,這裡大家先接觸一下,留個印象。