CSS3 自定义复选框 - 圆形滑块

CSS3 Transformicons Checkbox Refer to: http://www.sitepoint.com/theming-form-elements-sass/

CSS3，checkbox

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3005
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html,
body {
    height: 100%;
}
body {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    background: #f5e5f3;
}
.tcon-checkbox {
    height: 1.5rem;
    position: relative;
    width: 6rem;
}
.tcon-checkbox input[type=checkbox] {
    opacity: 0;
}
.tcon-checkbox input[type=checkbox]:focus ~ label {
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.4), 1px 1px 1px rgba(255, 255, 255, 0.6);
    background: #d3c1d1;
}
.tcon-checkbox input[type=checkbox]:checked ~ label {
    background: #4fbe79;
}
.tcon-checkbox input[type=checkbox]:checked ~ label:after {
    left: 4.5rem;
}
.tcon-checkbox label {
    border-radius: 4.5rem;
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.27), 1px 1px 1px rgba(255, 255, 255, 0.71);
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: background 150ms ease-in-out;
    transition: background 150ms ease-in-out;
    text-indent: -9999em;
    background: #e8dfe7;
}
.tcon-checkbox label:hover {
    cursor: pointer;
}
.tcon-checkbox label:after {
    border-radius: 4.5rem;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.42);
    content: "";
    cursor: pointer;
    display: block;
    height: 1.125rem;
    position: absolute;
    top: 0.1875rem;
    left: 0.375rem;
    width: 1.125rem;
    -webkit-transition: left 150ms ease-in-out;
    transition: left 150ms ease-in-out;
    z-index: 1;
    background: #fffffd;
    background-image: -webkit-radial-gradient(50% 0%, 10% 50%, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%), -webkit-radial-gradient(50% 100%, 10% 50%, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%), -webkit-radial-gradient(0% 50%, 50% 10%, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%), -webkit-radial-gradient(100% 50%, 50% 6%, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
    background-image: radial-gradient(50% 0%, 10% 50%, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%), radial-gradient(50% 100%, 10% 50%, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%), radial-gradient(0% 50%, 50% 10%, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%), radial-gradient(100% 50%, 50% 6%, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
}

HTML

CSS3 Transformicons Checkbox Refer to: http://www.sitepoint.com/theming-form-elements-sass/

CSS3，checkbox

编辑器支持Emmet

快捷键

CSS3 Transformicons Checkbox Refer to: http://www.sitepoint.com/theming-form-elements-sass/

CSS3，checkbox

CSS3 很酷的自定义表情复选框

CSS3 很棒的自定义复选框

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：