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>
  • 相关阅读:
    MySQL百万级、千万级数据多表关联SQL语句调优
    不就是SELECT COUNT语句吗,居然有这么多学问
    分布式锁讲解
    Java 中堆和栈的区别
    Java中的回调机制
    在Eclipse上Maven环境配置使用
    项目忽然出现 The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path 解决方法
    HttpServletResponse
    com.mysql.jdbc.exceptions.jdbc4.MySQLNonTransientConnectionException: No operations allowed after connection closed.
    深入浅出java常量池
  • 原文地址:https://www.cnblogs.com/rickyctbu/p/11870171.html
Copyright © 2011-2022 走看看