支援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
感謝~
其它文章
沒有留言:
張貼留言