纯css对radio和checkbox进行美化处理

来源:赵克立博客 分类: 前端设计 标签:css发布时间:2019-03-26 15:45:59最后更新:2019-05-21 09:52:15浏览:221
版权声明:
本文为博主原创文章,转载请声明原文链接...谢谢。o_0。
温馨提示:
技术类文章有它的时效性,请留意文章更新时间以及软件的版本
更新时间:
2019-05-21 09:52:15

最终效果

直接在页面中添加下面js就可以啦,不用其它多余的操作

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style>
        @-webkit-keyframes scale-spring{0%{opacity:.5;-webkit-transform:scale(0.5);transform:scale(0.5)}80%{opacity:.8;-webkit-transform:scale(1.1);transform:scale(1.1)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@-moz-keyframes scale-spring{0%{opacity:.5;-moz-transform:scale(0.5);transform:scale(0.5)}80%{opacity:.8;-moz-transform:scale(1.1);transform:scale(1.1)}100%{opacity:1;-moz-transform:scale(1);transform:scale(1)}}@keyframes scale-spring{0%{opacity:.5;-webkit-transform:scale(0.5);-moz-transform:scale(0.5);transform:scale(0.5)}80%{opacity:.8;-webkit-transform:scale(1.1);-moz-transform:scale(1.1);transform:scale(1.1)}100%{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1)}}label{display:inline-block}label span{display:block;margin-left:20px;height:30px;line-height:30px}label input[type=checkbox],label input[type=radio]{margin:7px 0px 0px 0px;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;width:16px;height:16px;cursor:pointer;vertical-align:center;background:#fff;border:2px solid #28bd8b;-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:flex;float:left}label input[type=checkbox]:checked:after,label input[type=radio]:checked:after{content:"";display:block;width:8px;height:8px;background:#28bd8b;-webkit-animation-name:scale-spring;-moz-animation-name:scale-spring;animation-name:scale-spring;-webkit-animation-duration:.3s;-moz-animation-duration:.3s;animation-duration:.3s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;animation-fill-mode:both}label input[type=checkbox]:disabled,label input[type=radio]:disabled{border-color:#cecece}label input[type=checkbox]:disabled:after,label input[type=radio]:disabled:after{background-color:#cecece}label input[type=radio],label input[type=radio]:checked:after{-moz-border-radius:50%;border-radius:50%}
    </style>
</head>
<body>
    <label>
        <input type="checkbox" /><span>1111</span></label>
    <label>
        <input type="checkbox" disabled="disabled" /><span>222</span></label>
    <label>
        <input type="checkbox" checked="checked" disabled="disabled" /><span>222</span></label>
    <label>
        <input type="radio" name="test" /><span>aaa</span></label>
    <label>
        <input type="radio" name="test" /><span>bbb</span></label>
</body>
</html>

scss源码

@-webkit-keyframes scale-spring {
    0% {
        opacity: .5;
        -webkit-transform: scale(0.5);
        transform: scale(0.5)
    }
    80% {
        opacity: .8;
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}
@-moz-keyframes scale-spring {
    0% {
        opacity: .5;
        -moz-transform: scale(0.5);
        transform: scale(0.5)
    }
    80% {
        opacity: .8;
        -moz-transform: scale(1.1);
        transform: scale(1.1)
    }
    100% {
        opacity: 1;
        -moz-transform: scale(1);
        transform: scale(1)
    }
}
@keyframes scale-spring {
    0% {
        opacity: .5;
        -webkit-transform: scale(0.5);
        -moz-transform: scale(0.5);
        transform: scale(0.5)
    }
    80% {
        opacity: .8;
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        transform: scale(1.1)
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        transform: scale(1)
    }
}
label {
    display: inline-block;
    span {
        display: block;
        margin-left: 20px;
        height: 30px;
        line-height: 30px;
    }
    input[type=checkbox],
    input[type=radio] {
        margin: 7px 0px 0px 0px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        outline: none;
        width: 16px;
        height: 16px;
        cursor: pointer;
        vertical-align: center;
        background: #fff;
        border: 2px solid #28bd8b;
        -webkit-box-pack: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        float: left;
        &:checked:after {
            content: "";
            display: block;
            width: 8px;
            height: 8px;
            background: #28bd8b;
            -webkit-animation-name: scale-spring;
            -moz-animation-name: scale-spring;
            animation-name: scale-spring;
            -webkit-animation-duration: .3s;
            -moz-animation-duration: .3s;
            animation-duration: .3s;
            -webkit-animation-fill-mode: both;
            -moz-animation-fill-mode: both;
            animation-fill-mode: both;
        }
        &:disabled {
            border-color: #cecece;
        }
        &:disabled:after {
            background-color: #cecece;
        }
    }
    input[type=radio],
    input[type=radio]:checked:after {
        -moz-border-radius: 50%;
        border-radius: 50%;
    }
}



微信号:kelicom QQ群:215861553 紧急求助须知
点击更换验证码
Win32/PHP/JS/Android/Python