css重写checkbox样式
2024-10-10 04:54:52
一、前言
默认的checkbox长这样：
<p>
<span><input type="checkbox" /></span>
<span>空闲</span>
<span><input type="checkbox" /></span>
<span>服务中</span>
</p>
有点丑，我想把它变成这样：
二、实现
1、checkbox 难看的框框隐藏掉，改用<label>元素连接到checkbox
<p>
<input type="checkbox" class="e-selfecheckbox" id="place1">
<label class="selfecheckbox_label" for="place1">空闲</label> <input type="checkbox" class="e-selfecheckbox" id="place2">
<label class="selfecheckbox_label" for="place2">服务中</label>
</p>
<style>
.e-selfecheckbox{
display: none;
}
</style>
2、隐藏的框框的用自定义图片来代替
<style type="text/css">
.e-selfecheckbox {
display: none;
} .selfecheckbox_label:before {
content: "";
display: inline-block;
vertical-align: middle;
width: 13px;
height: 13px;
background-image: url(img/scheduling_icon_uncheck2.png);
background-size: 100%;
}
</style>
3、给checkbox注册事件，原理就是点击的时候把他替换成另一张图片
<style type="text/css">
.e-selfecheckbox {
display: none;
} .selfecheckbox_label:before {
content: "";
display: inline-block;
vertical-align: middle;
width: 13px;
height: 13px;
background-image: url(img/scheduling_icon_uncheck2.png);
background-size: 100%;
} /*在e-selfecheckbox元素被选择的时候，将selfecheckbox_label前面的图片替换成另一张*/
.e-selfecheckbox:checked+.selfecheckbox_label:before {
background-image: url(img/scheduling_icon_checked2.png);
}
</style>
4、实现效果
三、结语
本来思路是想用js来实现这个功能的——点击的时候替换成另一个图片。结果问了下我们公司的前端，这么一搞，感觉好高大上啊！
路漫漫其修远兮，吾将上下而求索。
最新文章
- Bzoj3531: [Sdoi2014]旅行
- 支付宝APP支付之Java后台生成签名具体步骤
- enbale blakboxing
- 第三方Jar上传到Nexus3
- STREAM Benchmark
- 类的扩展－－类目和延展－－ios
- Swiper API
- 根据http协议传送数据
- Javascript的RegExp对象（转载自网络）
- Java实现简易的文件的迁移器
- NodeJS基础总结（一）
- [luogu P3313] [SDOI2014]旅行
- excel数据处理，公式
- 【转】背后的故事之 - 快乐的Lambda表达式（一）
- python作业简单FTP（第七周）
- JavaScript 使用 mediaDevices API 选择摄像头
- EL和jstl(概念和使用方法)
- kubernetes下安装mysql
- js css等静态文件版本控制,一处配置多处更新.net版【原创】
- java接口定义和作用