Loading...

CSS Radio Button

Temperature: 0 °C

ChungChung
author_tools

寫系統的時候三不五時總會用到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 Radio Button
當然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

使用dp.SyntaxHighlighter 程式碼色彩顯示工具,讓紀錄程式心得更有可看性

使用dp.SyntaxHig...

說好了要在innstory裡寫下故事紀錄... 所以是不是有方便紀錄的工具或方式,就變成我在開發in...

使用jquery animate達到動態效果

使用jquery anima...

首先..雖然在寫系統時常常會用到jquery 但我並沒有針對他的指令有做太深入的研究... 剛好這一...

Mysql最怕就是手賤

Mysql最怕就是手賤

今天我手賤了眼盲了@@... 錯把delete當成UPDATE....啃!!今天下午超不順的... ...

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