修改checkbox默认样式

  •  作者:root
  •  发布于:2019-09-10 11:13:59
  •  栏目:WEB前端
  •  来源:本站
  •  共70人围观
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>checkbox style</title>
    <style>
        /*把原来的复选框隐藏*/
        .input_checkbox input { position: absolute; clip: rect(0, 0, 0, 0);}
        .input_checkbox input[type="checkbox"] + label::before {
            content: "\a0";  
            display: inline-block;
            vertical-align: .2em;
            width: 20px;
            height: 20px;
            margin-right: .2em;
            border-radius: 5px;
            background-color: #fff;
            text-indent: .15em;
            line-height: 20px;  
            border: 1px solid #C1CACA;
        }
        .input_checkbox input[type="checkbox"]:checked + label::before {
            content: "\2714";
            color: #243441;
            border: 1px solid #92A1AC;
            box-shadow:0px 0px 5px 0px #47d9bf;
            border: 1px solid #92A1AC;
        }
    </style>
</head>
<body>
    <div>
        <input type="checkbox" id="label_input1" checked />
        <label for="label_input1">php</label>
        <input type="checkbox" id="label_input2" />
        <label for="label_input2">html</label>
        <input type="checkbox" id="label_input3" checked />
        <label for="label_input3">sql</label>
        <input type="checkbox" id="label_input4" />
        <label for="label_input4">javascript</label>
    </div>
</body>
</html>


效果图

QQ截图20171207153452.png


转载请说明出处: 我的博客园» 欢迎来到博客

评论