zoukankan      html  css  js  c++  java
  • 1、checkbox的样式美化

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>checkbox样式</title>
        <style>
            .el-checkbox{
                display: inline-block;
                position: relative;
                font-size: 14px;
                font-weight: 500;
                color: #606266;
                cursor: pointer;
                user-select: none;
                white-space: nowrap;
            }
            .el-checkbox-box{
                display: inline-block;
                width: 14px;
                height: 14px;
                border: 1px solid #dcdfe6;
                vertical-align: middle;
                border-radius: 2px;
            }
            .el-checkbox-box::after{
                width: 3px;
                height: 7px;
                content: '';
                border: 1px solid #fff;
                display: inline-block;
                border-top: 0;
                border-left: 0;
                position: absolute;
                top: 6px;
                left: 6px;
                transform: rotate(45deg);
            }
            .el-checkbox-origin[disabled]:checked + .el-checkbox-box::after{
                border-color: #c0c4cc;
            }
            .el-checkbox-origin{
                outline: none;
                opacity: 0;
                position: absolute;
                left: -999px;
            }
            .el-checkbox-text{
                display: inline-block;
                line-height: 19px;
                vertical-align: middle;
                padding: 2px;
            }
            .el-checkbox-origin:checked + .el-checkbox-box{
                background-color: #409eff;
                border-color: #409eff;
            }
            .el-checkbox-origin[disabled]:checked + .el-checkbox-box{
                background-color: #f2f6fc;
                border-color: #c0c4cc;
            }
            .el-checkbox:hover .el-checkbox-box{
                border-color: #409eff;
            }
    
            /*禁用的状态,注意需要和input里的disabled=disabled进行配合使用*/
            .el-is-disabled{
                cursor: not-allowed;
            }
            .el-is-disabled .el-checkbox-text {
                color: #c0c4cc;
            }
            .el-is-disabled:hover .el-checkbox-box{
                border-color: #dcdfe6;;
            }
        </style>
    </head>
    <body>
        <!-- 正常状态 -->
        <label role='checkbox' class='el-checkbox'>
            <span>
                <input type="checkbox" class='el-checkbox-origin'>
                <span class='el-checkbox-box'></span>
            </span>
            <span class='el-checkbox-text'>复选框1</span>
        </label>
        <!-- 选中状态 -->
        <label role='checkbox' class='el-checkbox'>
            <span>
                <input type="checkbox" class='el-checkbox-origin' checked>
                <span class='el-checkbox-box'></span>
            </span>
            <span class='el-checkbox-text'>复选框2</span>
        </label>
        <!-- 禁用状态 -->
        <label role='checkbox' class='el-checkbox el-is-disabled'>
            <span>
                <input type="checkbox" class='el-checkbox-origin' disabled=disabled>
                <span class='el-checkbox-box'></span>
            </span>
            <span class='el-checkbox-text'>复选框3</span>
        </label>
        <label role='checkbox' class='el-checkbox el-is-disabled el-is-checked'>
            <span>
                <input type="checkbox" class='el-checkbox-origin' disabled=disabled checked>
                <span class='el-checkbox-box'></span>
            </span>
            <span class='el-checkbox-text'>复选框3</span>
        </label>
    </body>
    </html>
  • 相关阅读:
    前台ajax传数组,后台java接收
    CSS揭秘—打字动效(四)
    通过四个问题了解HTTP协议基础
    Fiddler抓包工具怎么设置HTTPS抓包
    固定定位导致$(window).scrollTop();获取滚动后到顶部距离总是为0
    git bash 使用自带 curl 命令出现乱码解决方法
    移动端布局方案—vw+rem
    Windows安装Nginx需要注意的地方
    orientation属性(判断是否为横竖屏)
    js之瀑布流的实现
  • 原文地址:https://www.cnblogs.com/rickyctbu/p/11870171.html
Copyright © 2011-2022 走看看