CSS Radio Button

Temperature: 0 °C

ChungChung
寫系統的時候三不五時總會用到Radio Button 和 Checkboxes 目前就在寫這個部份@@..

也順便把做法紀錄下來...

說真的已經厭倦了基本格式

<input type="radio" name="" value=""/>
<input type="checkbox" name="" value=""/>

現在...們可以只需使用HTML和CSS不需使用JavaScript或JQuery....就能改變他的外觀....

底下說明html的部份...

<div id="select_typesetting">
<input type="radio" id="radio1" name="radios" value="all" checked>
<label for="radio1">name01</label>
<input type="radio" id="radio2" name="radios"value="false">
<label for="radio2">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的部份可以依喜好調整......

作者簡介

Chung

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

訪客留言

留下一些足跡證明你來拜訪過我

推薦閱讀

作者其他相關類別故事

新舊交替,使用phpmyadm出現1064 error in CREATE TABLE … TYPEMYISAM錯誤

新舊交替,使用phpmyadm出現1064 error in CREATE TABLE … TYPE=MYISAM錯誤

sql 系統移機的過程中,最重要的環節....我想...莫過於是系統的環境了....。...

清除網頁暫存(no cache)

清除網頁暫存(no cache)

pexelsphoto 在製作專案時,有沒有試過JS 或 CSS 明明就已經更新了~ ...

使用jquery animate達到動態效果

使用jquery animate達到動態效果

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

請選擇選項

執行錯誤

Hi,謝謝你的參與,但無法重複投票哦~

現在就加入innstory,開始紀錄你的故事。

「innstory」是一個儲存故事的地方,我們致力於成為一個有溫度的平台,加深人與人之間的羈絆是我們所努力的方向。
我們深信人與人間的區塊鏈不是只是冷冰冰的運算。現在就加入我們。