原生radio/checkbox样式更改

radio选择器与文字对齐

vertical-align:middle;
 margin-top:-2px; 
margin-bottom:1px;

chackbox样式更改
将单选框或多选框变为透明,在其内部label前设置伪元素,伪元素的样式设置为你想要设置的选择器样式,之后将原选择器定位到伪元素之上,从而使得点击可以改变伪元素的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            position: relative;
        }
        input[type='checkbox']{
            opacity: 0;
            position: absolute;
            top: 3px;
            left: -4px;
            z-index: 100;
        }
        input[type='checkbox'] + label::before{
            vertical-align:middle; margin-top:-2px; margin-bottom:1px;
            content: '';
            display: inline-block;
            box-sizing: border-box;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            border: 1px solid #007bb5;
        }
        input[type='checkbox']:checked + label::before{
            padding: 2px;
            box-sizing: border-box;
            background-color: #007bb5;
            background-clip: content-box;
        }
    </style>
</head>
<body>
    <div><input type="checkbox"><label>面对疾风吧</label></div>
</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容