DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS3基礎 >> 4.3 :checked選擇器
4.3 :checked選擇器
編輯:CSS3基礎     

一、:checked選擇器

在表單元素中,單選按鈕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選擇器,這裡大家先接觸一下,留個印象。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved