单选按钮、多选按钮用图片实现加样式

前端技术 2023/09/03 HTML
之前一直看到有人在问，单选按钮和多选按钮怎么加样式、怎么把按钮变大？下面把我做的一个例子分享出来。

1.首先把按钮做成图片
 

2.html页面

复制代码
代码如下:

<!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=\'checkbox\']\").click(function(){
if($(this).is(\':checked\')){
$(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=\'radio\']\").click(function(){
$(\"input[type=\'radio\']\").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>

本文地址：https://www.stayed.cn/item/6189

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案