使用伪元素改变CheckBox的默认样式 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            input{
                -webkit-appearance: none;/* 清除默认样式 */
                position: relative;
                left: 100px;
                top: 100px;
                width: 22px;
                height: 22px;
                border: 1px solid black;
            }
            input:checked{
                background: palegreen;/* 被选中时框框中的颜色 */
            }
            input:after{/* 添加内部白框框 */
                content: '';
                position: absolute;
                top: 1px;
                width: 14px;
                height: 14px;
                border: 2px solid white;/* 框框颜色和粗细 */
                left: 1px;
            }
        </style>
    </head>
    <body>
        <input type="checkbox" value="commit" />
    </body>
</html>

效果图

posted @ 2019-08-26 17:17  A-zero  阅读(226)  评论(0)  编辑  收藏  举报