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来实现这个功能的——点击的时候替换成另一个图片。结果问了下我们公司的前端,这么一搞,感觉好高大上啊!

路漫漫其修远兮,吾将上下而求索。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏偏前端工程师的驿站

location的hash部分和使用window.onhashchange实现ajax请求内容时使用浏览器后退和前进功能

 在js跨域双向数据传递时可以用iframe加上location.hash来实现,在研究这个的时候深入学习了一下hash的特性。   hash就是uri中#及后...

22910
来自专栏吴裕超

js设计模式之惰性单例模式

<html> <body> <button id="loginBtn">登录</button> </body> <script> var cr...

3276
来自专栏mySoul

node函数 node路由

访问连接 http://127.0.0.1:1937/hello%20word.html

1774
来自专栏我爱编程

Day22psutil&图形界面

psutil 用Python来编写脚本简化日常的运维工作是Python的一个重要用途。 在Python中获取系统信息的一个好办法是使用psutil这个第三方模...

2785
来自专栏技术博文

ueditor富文本编辑器 修改框宽度和高度的方法

在使用ueditor的时候,用的textarea <textarea name="content" id="myEditor">这里写这条规则的回复内容</te...

3547
来自专栏Golang语言社区

golang文件传输服务

本篇介绍一个完整的golang文件传输服务器。 完整的代码可以看服务器,客户端 网络使用的框架如上篇介绍,这里就不再复述. 首先定义3个命令码: const (...

3335
来自专栏deepcc

判断IE版本的语句 [if lte IE 6]...[endif]

3547
来自专栏一“技”之长

OS X 开发:打开文件面板NSOpenPanel应用

      在Mac桌面软件开发中,如果涉及到对文件的操作,无论是新建文件还是选择或读取文件,都离不开文件路径的定位,NSOpenPanel类提供了简洁的文件选...

1233
来自专栏前端学习心得

Vue2.0学习(四)--组件的继承与扩展

本文将介绍vue2.0中的组件的继承与扩展,主要分享slot、mixins/extends和extend的用法。

1401
来自专栏章鱼的慢慢技术路

Go语言实践_实现一(服务器端)对多(客户端)在线聊天室

运用Go语言中的goroutine和通道实现一个简单的一个服务器端对多个客户端的在线聊天

1543

扫码关注云+社区

领取腾讯云代金券