用css修改input[type=checkbox]时默认样式
来源:互联网 发布:python sched 编辑:程序博客网 时间:2024/05/21 22:43
点击后
<ul>
<li>
<input type="checkbox" name="default-address" id="default-address" class="default-address" />
<label for="default-address" ></label>
<span class="checkbox-content">设为默认</span>
</li>
</ul>
css代码
1、先给最外层li设置相对位置
ul li:last-child {
position:relative;
}
2、隐藏input[type=checkbox]的默认样式,并设置绝对位置
ul li input[type='checkbox'] {
visibility:hidden;
position:absolute;
}
3、给label设置背景图片,并根据需要整体缩小图片,设置图片位置
ul li .default-address + label {
background: url('img/default-unselect.png') no-repeat;
zoom:0.7;
padding-top:0.01rem;
padding-left:0.21rem;
}
4、运用jQuery设置点击时,改变文字和背景图片
$("input[type='checkbox']").change(function () {
if ($("input[type='checkbox']").is(':checked')) {
$("input[type='checkbox']:checked + label").css("background","url('../Content/css/img/default-select.png') no-repeat");
$("input[type='checkbox']:checked + label + .checkbox-content").html("默认");
} else {
$("input[type='checkbox'] + label").css("background","url('../Content/css/img/default-unselect.png') no-repeat");
$("input[type='checkbox'] + label + .checkbox-content").html("设为默认");
}
})
阅读全文
0 0
- 用css修改input[type=checkbox]时默认样式
- 修改 input[type=checkbox] 默认样式
- input[type="date"]默认样式修改
- input[type=date]默认样式修改
- input[type="date"]默认样式修改
- css input[type=file] 样式美化 (radio checkbox类似)
- css input[type=file] input[type=radio] input[type=checkbox]样式美化,input上传按钮美化
- 如何修改input[type="file"]的默认样式
- 自定义input[type="checkbox"]的样式
- input多选框checkbox单选框radio的样式修改-------CSS
- 修改 input[type="file"] 原生样式
- input[type="file"]的样式修改
- html5 <input type='file' 样式修改
- input,type="file"的样式修改
- 如何修改input type="file"样式
- CSS input checkbox自定义样式
- input type="checkbox"
- input修改placeholder默认样式
- 《这一生,静待时光检验》读后笔记
- 去掉按钮阴影的方法和消除表格加背景颜色后出现的缝隙
- SUI Moblie 中出现$.init() 或$.alert()not a function和自定义Moble中的嵌套标签页时,点击tab2时一直出现tab1的内容
- 在html中,通过添加close-popup类关闭popup时,不能关闭popup跳出层
- 关于图片与文字的水平距中
- 用css修改input[type=checkbox]时默认样式
- Emiller Nginx模块开发指南
- 怎样将header和footer分别固定在页面上的最两端
- 二、实现从一页面跳转到指定模块的位置,并将该模块在主区域中显示出来
- Apache主配置文件httpd.conf 详解
- 文本、input、img在同一行时设置垂直距中
- 关于windows不支持NODE_ENV=development的问题
- “王者荣耀”中的常用英语
- hdu1806——Frequent values