支援CSS3 以上

用法：::checked
說明：
選擇到的選項，
有checked屬性的tag
如：
input type="radio"
input type="checkbox"
select option

css定義：
    input tag 選擇到的 套用樣式
input:checked {
height: 30px;
width: 30px;
}
select option 選擇到的 套用樣式
option:checked {
color: blue;
}
注意事項：


程式：
<!DOCTYPE html>
<html>
<head>
<title>css3 Selector checked 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
input:checked {
    height: 30px;
    width: 30px;
}

option:checked {
    color: blue;
}

</style>
</head>
<body>
<form action="">
性別：
 <input type="radio" value="male" name="gender"> 男生
 <input type="radio" value="female" name="gender"> 女生<br>
擁有:
 <input type="checkbox" value="Bike">自行車
 <input type="checkbox" value="Car">汽車<br>
          職業：
<select>
 <option value="1">職業 1</option>
 <option value="2">職業 2</option>
 <option value="3">職業 3</option>
 <option value="4">職業 4</option>
</select>
</form>
</body>
</html>

圖1：


圖2：


測試結束~
如果還不了解可參考：w3schools CSS Selector Reference


感謝~




 






 















其它文章


arrow
arrow
    文章標籤
    css css3 職業 select 套用 checked checkbox 目錄 option 程式 用法 selector
    全站熱搜
    創作者介紹
    創作者 PG Levin Li 的頭像
    PG Levin Li

    程式開發學習之路

    PG Levin Li 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄