1、 单选按钮多选按钮用图片实现加样式之前一直看到有人在问,单选按钮和多选按钮怎么加样式、怎么把按钮变大?下面把我做的一个例子分享出来。 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() $(“inpu
2、ttype=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“); ); $(“inputtype=radio“).click(function() $(“inputtype=radi
3、o“).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; hei
4、ght: 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(./image
5、s/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: -9
6、999px; /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-
7、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