1. 程式人生 > >html自定義單選按鈕radio(CSS)

html自定義單選按鈕radio(CSS)

最近需要自定義radio,參考了一些別人的文章,在這裡記錄一下自己做的一個小選擇頁面。

效果圖如下:(點選按鈕前)

點選按鈕並選擇後:

 顏色大小等都可以根據專案進行修改,這裡為了介面的好看,對span整個Div左浮動,選擇項右浮動。為了分割開選項,採取了給按鈕右邊新增border的方法,當然也可以直接劃一整條線,大家可以自己試試,接下來上程式碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>單選</title>
<style>
span{display:block ;height:32px;vertical-align:middle;}
#khpdbDiv{padding:10px;}
.al-center{ text-align:center;}
.al-left{text-align:left;}
input{font-size:14px; border:none; font::14px/1.5 \5B8B\4F53}
input[type='radio']{width: 15px; height: 15px; padding-top:4px; }
table{border-collapse: collapse;border-spacing: 0; }
table td{position: relative;align:left;padding:10px 10px;min-height: 16px;line-height: 16px;font-size: 14px;border:1px solid #2c2c2c;}
.leftDiv{
float:left;
padding-top:5px;
padding-right:10px;
width: 75%;}
.rightDiv{
	float:right;
	width: 15%;
}
.rightInnerDiv{
	float:right;
	width: 80px;
	padding-left:6px;
	border-left:2px solid #6c6c6c;
	border-right:2px solid #6c6c6c;
}
.lineDiv{
	float:left;
	height:24px;
    width:22px;
	border-right:2px solid #6c6c6c;
	margin-right:5px;
}
 label input[type="radio"] {
            appearance: none;
            -webkit-appearance: none;
            outline: none;
            margin: 0;
        }

        label input[type="radio"]:after {
            display: block;
            content: "";
            width: 13px;
            height: 13px;
            background: #fff;
            border-radius: 50%;
            border: 1px solid #2c2c2c;
        }

        label input[type="radio"]:checked:after {
            background: #333;
            border: 1px solid #2c2c2c;
        }
		
		label input[type="radio"]:disabled:after{
			border: 1px solid #666;
			border-radius: 50%;
			opacity:0.7;  
			moz-opacity:0.7;
		}
</style>
</head>
<body>
<div style = "padding-left:50px;padding-right:50px;">
<h1 style="text-align:center; padding:10px;">radio單選自定義</h1>
<table id = "table_test" width="100%">
<tbody id="Tb_test1">
<tr>
<td>
單項選項<br /><button id = "test" onclick = "test()">點選啟用禁用項</button>
</td>
<td>
<div class = "leftDiv">
<span>1、這是測試內容1,請選</span>
<span>2、這是測試內容2,請選</span>
<span>3、這是測試內容3,請選</span>
<span>4、這是測試內容4,請選</span>
</div>
<div class="rightDiv">
<div class="rightInnerDiv">
<div class="lineDiv"><label><input name = "NR1" type="radio" class = "wx-radio-input-disable" id="NR1_Y" value = "NR1_Y" checked="checked"></input></label></div>
<div class="lineDiv"><label><input type="radio" id="NR1_HG" value = "NR1_HG" name = "NR1"  ></input></label></div>
<label><input type="radio" id="NR1_BHG" value = "NR1_BHG" name = "NR1"   ></input></label>
<br></br>
<div class="lineDiv"><label><input type="radio" id="NR2_Y" value = "NR2_Y" name = "NR2"   checked disabled ></input></label></div>
<div class="lineDiv"><label><input type="radio" id="NR2_HG" value = "NR2_HG" name = "NR2"  disabled ></input></label></div>
<label><input type="radio" id="NR2_BHG" value = "NR2_BHG" name = "NR2" disabled   ></input></label>
<br></br>
<div class="lineDiv"><label><input type="radio" id="NR3_Y" value = "NR3_Y" name = "NR3" disabled ></input></label></div>
<div class="lineDiv"><label><input type="radio" id="NR3_HG" value = "NR3_HG" name = "NR3"   disabled ></input></label></div>
<label><input type="radio" id="NR3_BHG" value = "NR3_BHG" name = "NR3" disabled   ></input></label>
<br></br>
<div class="lineDiv"><label><input type="radio" id="NR4_Y" value = "NR4_Y" name = "NR4"   disabled ></input></label></div>
<div class="lineDiv"><label><input type="radio" id="NR4_HG" value = "NR4_HG" name = "NR4"   disabled ></input></label></div>
<label><input type="radio" id="NR4_BHG" value = "NR4_BHG" name = "NR4"  disabled  ></input></label>
</div></div>

</td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="jq/jquery.min.js"></script>
<script type="text/javascript">
/*<![CDATA[ */
function test(){
	$("input[type = 'radio']").removeAttr("disabled");
}
/*]]>*/
</script>
</html>

友情提醒,這裡按鈕採取了JQ的寫法,大家記得把JQ庫引用一下。