收藏 分享(赏)

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

上传人:kuailexingkong 文档编号:1183041 上传时间:2018-06-17 格式:DOC 页数:3 大小:19.50KB
下载 相关 举报
单选按钮多选按钮用图片实现加样式.doc_第1页
第1页 / 共3页
单选按钮多选按钮用图片实现加样式.doc_第2页
第2页 / 共3页
单选按钮多选按钮用图片实现加样式.doc_第3页
第3页 / 共3页
亲,该文档总共3页,全部预览完了,如果喜欢就下载吧!
资源描述

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

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 企业管理 > 经营企划

本站链接:文库   一言   我酷   合作


客服QQ:2549714901微博号:道客多多官方知乎号:道客多多

经营许可证编号: 粤ICP备2021046453号世界地图

道客多多©版权所有2020-2025营业执照举报