首頁  >  文章  >  web前端  >  單選和多選按鈕如何為圖片加樣式

單選和多選按鈕如何為圖片加樣式

php中世界最好的语言
php中世界最好的语言原創
2018-02-01 09:52:122789瀏覽

這次為大家帶來單選和多選按鈕如何為圖片加樣式,單選和多選按鈕給圖片加樣式的注意事項有哪些,下面就是實戰案例,一起來看一下。

之前一直看到有人在問,單選按鈕和多選按鈕怎麼加樣式、怎麼把按鈕變大?下面把我做的一個例子分享出來

代碼如下:

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="jquery-1.10.2.min.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$("input[type=&#39;checkbox&#39;]").click(function(){ 
if($(this).is(&#39;:checked&#39;)){ 
$(this).attr("checked","checked"); 
$(this).parent().removeClass("c_off").addClass("c_on"); 
}else{ 
$(this).removeAttr("checked"); 
$(this).parent().removeClass("c_on").addClass(" c_off"); 
} 
}); 
$("input[type=&#39;radio&#39;]").click(function(){ 
$("input[type=&#39;radio&#39;]").removeAttr("checked"); 
$(this).attr("checked","checked"); 
$(this).parent().removeClass("r_off").addClass("r_on").siblings().removeClass("r_on").addClass("r_off"); 
}); 
}); 
</script> 
</head> 
<style> 
/* 多选/单选 */ 
label { 
display: block; 
cursor: pointer; 
line-height: 26px; 
margin-bottom: 20px; 
width: 26px; 
height: 26px; 
line-height: 26px; 
float: left; 
margin-top: 6px; 
} 
.radios { 
padding-top: 18px; 
border-top: 1px solid #049CDB; 
} 
.label_check input, .label_radio input { 
margin-right: 5px; 
} 
.lblby .label_check, .lblby .label_radio { 
margin-right: 8px; 
} 
.lblby .label_radio, .lblby .label_check { 
background: url(../images/jxc_btn.png) no-repeat; 
} 
.lblby .label_check { 
background-position: 0 0px 
} 
.lblby label.c_on { 
background-position: 0 -26px; 
} 
.lblby .label_radio { 
background-position: 0 -52px; 
} 
.lblby label.r_on { 
background-position: 0 -78px; 
} 
.lblby .label_check input, .lblby .label_radio input { 
position: absolute; 
left: -9999px; 
} 
</style> 
<body class="lblby"> 
<label for="checkbox-01" class="label_check c_on"> 
<input type="checkbox" checked="checked" value="1" id="checkbox-01" name="sample-checkbox-01" /> 
Checkbox1 </label> 
<label for="checkbox-02" class="label_check"> 
<input type="checkbox" value="1" id="checkbox-02" name="sample-checkbox-02" /> 
Checkbox2</label> 
<label for="radio-01" class="label_radio r_on"> 
<input type="radio" value="1" checked="checked" id="radio-01" name="sample-radio" /> 
Radio1 </label> 
<label for="radio-02" class="label_radio r_off"> 
<input type="radio" value="1" id="radio-02" name="sample-radio" /> 
Radio2 </label> 
<label for="radio-03" class="label_radio r_off"> 
<input type="radio" value="1" id="radio-03" name="sample-radio" /> 
Radio3 </label> 
</body> 
</html>

相信看了這些案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

相關閱讀:

html怎麼實作可輸入的下拉式選單

a標籤如何使用href屬性與onclick事件

css3的新單位vw、vh、vmin、vmax應該如何使用

CSS的經典三欄佈局如何實現

以上是單選和多選按鈕如何為圖片加樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn