Loading...

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的部份可以依喜好調整......
https://innstory.com/story-CSSRadioButton-277

作者簡介

Chung

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

訪客留言

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

推薦閱讀

作者其他相關類別故事

Welcome To Google

Welcome To Google

Top第一天,參訪了Google APAC HQ 第一次來到Google,難掩興奮心情...

判斷捲軸的位置

判斷捲軸的位置

當捲軸往下移動時,判段目前移動到哪個位置... Javascript部份 $(...

JavaScript 檢查 Radio Button

JavaScript 檢查 Radio Button

要用 JavaScript 來檢查同一組的 radio button 是否已選,可用以...

請選擇選項

執行錯誤

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

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

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