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

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

  • 相关阅读:
    pip安装itchat模块成功后annocanda中No module named 'itchat'
    Ant安装以及环境配置以及使用[windows环境]
    初窥Android Studio
    uiautomatorviewer详解
    看到一个牛人的群聊天记录,超赞!(转载)
    pyCharm最新激活码(2018)
    所有版本chrome、chromedriver、firefox下载链接
    Python---查看安装路径
    bash、dash(/bin/bash和/bin/sh)的区别
    肉鸡是什么?
  • 原文地址:https://www.cnblogs.com/jmcui/p/8535774.html
Copyright © 2011-2022 走看看