Loading...

CSS Radio Button

Temperature: 0 °C

ChungChung
寫系統的時候三不五時總會用到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-CSS_Radio_Button-277

Prev
 最幸福的作品

Next
寶貝計劃 

About the Author

Chung

我是chung
網路工作者
主業是網站系統開發建置
副業是做夢,寫故事
作品請參考/teme.biz
做夢請參考/innstory.com
聯絡/chung.teme@gmail.com

#有人用筆寫日記,有人用歲月寫日記,有人用照片寫日記,而我,用innstory寫日記。

Visitor message

Leave some footprints to prove that you visited me

Recommended reading

Author's other related stories

PHP 利用phpmailer 寄信...

PHP 利用phpmailer 寄信...

一般來說其實PHP本身已經提供了Mail()函數可以使用,但由於一些令人不愉快的原因....

動態留言功能調整

動態留言功能調整

guestmap 最近改進了朋友動態的發文方式.... 一開始在功能方面加上了...

PHP如何將陣列組合接成字串

PHP如何將陣列組合接成字串

$arr = array(&#;hello&#;,&#;word&#;); echo...

Please select an option

error

Hi, thank you for your participation, but you cannot vote repeatedly~

Join innstory now and start recording your story.

"Innstory" is a place to store stories. We are committed to becoming a warm platform. Deepening the bonds between people is our direction.
We are convinced that the blockchain between people is not just a cold calculation. Join us now.

Wrong format