css重写checkbox样式
一、前言
默认的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来实现这个功能的——点击的时候替换成另一个图片。结果问了下我们公司的前端,这么一搞,感觉好高大上啊!
路漫漫其修远兮,吾将上下而求索。
css重写checkbox样式的更多相关文章
- CSS控制checkbox样式
原文地址:http://www.xiumu.org/technology/style-checkboxes-with-css.shtml#comments Checkbox复选框是一个可能每一个网站都 ...
- css的checkbox样式变化
1.CSS body{font-family:'微软简行楷'} ul li{list-style:none; margin:10px;color:#4985d7;} .myCheck { displa ...
- 纯css实现checkbox样式改变
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
- 用css改变默认的checkbox样式
自己常用的改变checkbox样式的两个方法: 一.利用background用图片代替checkbox效果 缺点:你首先得有一张好看的图片 优点:浏览器兼容性好 <!doctype html&g ...
- 转 纯CSS设置Checkbox复选框控件的样式
Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...
- 【转】纯CSS设置Checkbox复选框控件的样式
Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...
- 纯CSS设置Checkbox复选框控件的样式
Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...
- 使用CSS实现自定义input[checkbox]样式
思路:使用label上的for熟悉,与checkbox上的id相对应来达到点击选中效果,在使用伪元素,或者其他元素,定位至checkbox上方,替代checkbox,并且隐藏checkbox,使用CS ...
- css美化checkbox的样式
使用iCheck插件可以改变checkbox.radio的原有样式,但是改变的样式尺寸有些大修改起来也比较麻烦,并且需要使用iCheck的调用方法才能使用,有时候iCheck方法还会覆盖掉同级元素的c ...
随机推荐
- Javascript高级编程学习笔记(41)—— DOM(7)DocumentFragment类型
DocumentFragment类型 除开昨天我们了解的两种不常用的类型之外 今天我们要介绍的两种类型可以说使用频率不输于前面最常用的几种元素类型 首先就是DocumentFragment类型 有些小 ...
- Javascript高级编程学习笔记(21)—— 对象原型
JS中对象相关的最重要的恐怕就是原型链了 原型链也是JS中对象继承的实现的基础 接昨天的文章,我们使用构造函数创建对象的时候仍然存在一些问题 那就是所有的实例没法共用一个函数 这样无疑会造成极大的内存 ...
- Javascript高级编程学习笔记(14)—— 引用类型(3)Date类型
除了前两天介绍的Object.Array类型,Date应该就是JS中最常用的引用类型了 先介绍一下Date类型,该类型使用在Java的 java.until.Date 类的基础上构建的 使用UTC 1 ...
- es5
var arr1=["上海","北京","广州"]; var arr2=[12,22, 33,58,32,45,92]; // 数组.方法( ...
- Maven 项目打包出现错误 Failed to execute goal org.apache.maven.plugins:maven-resources-plugin
今天碰到一个奇怪的问题,就是我在eclipse中使用maven命令:clean package 命令打完包之后,通过FlashFXP将jar包上传到Linux服务器后,由于其他原因,我想要修改下程序重 ...
- TS - 解决问题的一些方法
How to resolve the problem? 获取基本的相关信息(后续处理问题的基础) 在怎样的背景环境下?发生了怎样的问题? 如果无法清楚地辨别或陈述问题的基本信息,那么,此时要面对的将 ...
- [2019BUAA软工助教]第0次代码作业
[2019BUAA软工助教]第0次代码作业 前言 本博客为完成结对项目所需的先导知识,题目不难,请认真对待 :) 欢迎来到软件工程 :) 注:本次实验为附加作业,不做不扣分,做了有附加分 Part 0 ...
- Zookeeper-watcher机制源码分析(二)
服务端接收请求处理流程 服务端有一个NettyServerCnxn类,用来处理客户端发送过来的请求 NettyServerCnxn public void receiveMessage(Channel ...
- ionic3 实现扫码功能
ionic3 通过插件phonegap-plugin-barcodescanner,调用机器硬件摄像头实现扫码功能. 首先当然先了解下 phonegap-plugin-barcodescanner,这 ...
- java各种集合的线程安全
微信公众号[程序员江湖] 作者黄小斜,斜杠青年,某985硕士,阿里 Java 研发工程师,于 2018 年秋招拿到 BAT 头条.网易.滴滴等 8 个大厂 offer,目前致力于分享这几年的学习经验. ...