- Chung
- 0°C
- 10 年又 363 天
CSS Radio Button
寫系統的時候三不五時總會用到Radio Button 和 Checkboxes 目前就在寫這個部份@@..也順便把做法紀錄下來...
說真的我已經厭倦了基本格式
[input name=[s][s] type=[s]radio[s] value=[s][s] /]
[input name=[s][s] type=[s]checkbox[s] value=[s][s] /]
現在...我們可以只需使用HTML和CSS不需使用JavaScript或JQuery....就能改變他的外觀....
底下說明html的部份...
[div id=[s]select_typesetting[s]]
[input checked=[s]checked[s] id=[s]radio1[s] name=[s]radios[s] type=[s]radio[s] value=[s]all[s] /]
[label for=[s]radio1[s]]name01[/label]
[input id=[s]radio2[s] name=[s]radios[s] type=[s]radio[s] value=[s]false[s] /]
[label for=[s]radio2[s]]name02[/label]
接下來...再使用css做些變化
#select_typesetting input[type=radio]{
display:none;
}
#select_typesetting input[type=radio] + label{
display:inline-block;
margin:-2px;
padding: 4px 12px;
margin-bottom: 0;
font-size: 10pt;
line-height: 20px;
color: #999;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
background-image: -o-linear-gradient(top,#fff,#e6e6e6);
background-image: linear-gradient(to bottom,#fff,#e6e6e6);
background-repeat: repeat-x;
border: 1px solid #ccc;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
border-bottom-color: #b3b3b3;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
}
#select_typesetting input[type=radio]:checked + label{
font-size:9pt;
color:#900;
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
background-color:#e0e0e0;
}
就會產生像Demo圖中的樣式....
當然css的部份可以依喜好調整......
https://innstory.com/story-CSSRadioButton-277
