innstory.com,寫程式筆記，CSS Radio Button

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;

}