纯Css代码美化checkbox复选框、radios单选框和滑动按钮简单方法

我们知道css可以美化前端页面，本文我们就和大家分享纯Css代码美化checkbox复选框、radios单选框和滑动按钮的简单方法，希望能帮助到大家。

效果预览

1. 复选框

            .switch {            margin: 20px 20px 0 0;            display: flex;            align-items: center;            width: auto;        }        .checkbox-input {            display: none        }        .checkbox {            -webkit-transition: background-color 0.3s;            transition: background-color 0.3s;            background-color: #fff;            border: 1px solid #d7d7d7;            border-radius: 3px;            width: 16px;            height: 16px;            vertical-align:middle;            margin: 0 5px;        }        .checkbox-input:checked+.checkbox {            background-color: #57ad68;        }        .checkbox-input:checked+.checkbox:after {            content: "�4";            display: inline-block;            height: 100%;            width: 100%;            color: #fff;            text-align: center;            line-height: 16px;            font-size: 12px;            box-shadow: 0 0 4px #57ad68;        }                                Hello    

登录后复制登录后复制

2. 单选框

            .switch {            display: flex;            align-items: center;            width: auto;            float: left;        }        .radio-beauty-container .radio-beauty {            width: 16px;            height: 16px;            box-sizing: border-box;            display: inline-block;            border: 1px solid #d7d7d7;            margin: 0 5px;            border-radius: 50%;            transition: 0.2s;        }        .radio-beauty-container input[type="radio"]:checked+.radio-beauty {            border: solid 1px green;            padding: 3px;            background-color: green;            background-clip: content-box;            box-shadow: inset 0 0 1px rgba(0,128,0, 0.2), 0 0 3px green;        }        
                    radio2                                                    radio3                                    

登录后复制登录后复制

3. 滑动按钮

            .switch-slide-label {            display: block;            width: 34px;            height: 18px;            background: #ccc;            border-radius: 30px;            cursor: pointer;            position: relative;            -webkit-transition: 0.3s ease;            transition: 0.3s ease;        }                .switch-slide-label:after {            content: '';            display: block;            width: 16px;            height: 16px;            border-radius: 100%;            background: #fff;            box-shadow: 0 1px 1px rgba(0, 0, 0, .1);            position: absolute;            left: 1px;            top: 1px;            -webkit-transform: translateZ(0);            transform: translateZ(0);            -webkit-transition:0.3s ease;            transition:0.3s ease;        }                .switch-slide input:checked+label {            background: #34bf49;            transition: 0.3s ease;        }        .switch-slide input:checked+label:after {            left: 17px;        }        
                                                            

登录后复制登录后复制

最简洁的代码美化复选框、单选框和滑动按钮

效果预览

1. 复选框

            .switch {            margin: 20px 20px 0 0;            display: flex;            align-items: center;            width: auto;        }        .checkbox-input {            display: none        }        .checkbox {            -webkit-transition: background-color 0.3s;            transition: background-color 0.3s;            background-color: #fff;            border: 1px solid #d7d7d7;            border-radius: 3px;            width: 16px;            height: 16px;            vertical-align:middle;            margin: 0 5px;        }        .checkbox-input:checked+.checkbox {            background-color: #57ad68;        }        .checkbox-input:checked+.checkbox:after {            content: "�4";            display: inline-block;            height: 100%;            width: 100%;            color: #fff;            text-align: center;            line-height: 16px;            font-size: 12px;            box-shadow: 0 0 4px #57ad68;        }                                Hello    

登录后复制登录后复制

2. 单选框

            .switch {            display: flex;            align-items: center;            width: auto;            float: left;        }        .radio-beauty-container .radio-beauty {            width: 16px;            height: 16px;            box-sizing: border-box;            display: inline-block;            border: 1px solid #d7d7d7;            margin: 0 5px;            border-radius: 50%;            transition: 0.2s;        }        .radio-beauty-container input[type="radio"]:checked+.radio-beauty {            border: solid 1px green;            padding: 3px;            background-color: green;            background-clip: content-box;            box-shadow: inset 0 0 1px rgba(0,128,0, 0.2), 0 0 3px green;        }        
                    radio2                                                    radio3                                    

登录后复制登录后复制

3. 滑动按钮

            .switch-slide-label {            display: block;            width: 34px;            height: 18px;            background: #ccc;            border-radius: 30px;            cursor: pointer;            position: relative;            -webkit-transition: 0.3s ease;            transition: 0.3s ease;        }                .switch-slide-label:after {            content: '';            display: block;            width: 16px;            height: 16px;            border-radius: 100%;            background: #fff;            box-shadow: 0 1px 1px rgba(0, 0, 0, .1);            position: absolute;            left: 1px;            top: 1px;            -webkit-transform: translateZ(0);            transform: translateZ(0);            -webkit-transition:0.3s ease;            transition:0.3s ease;        }                .switch-slide input:checked+label {            background: #34bf49;            transition: 0.3s ease;        }        .switch-slide input:checked+label:after {            left: 17px;        }        
                                                            

登录后复制登录后复制

   相关推荐：

HTML页面中的的美化checkbox_html/css_WEB-ITnose

立即学习“前端免费学习笔记（深入）”；

HTML页面中的的美化checkbox_html/css_WEB-ITnose

立即学习“前端免费学习笔记（深入）”；

HTML页面中的的美化checkbox_html/css_WEB-ITnose

立即学习“前端免费学习笔记（深入）”；

以上就是纯Css代码美化checkbox复选框、radios单选框和滑动按钮简单方法的详细内容，更多请关注【创想鸟】其它相关文章！