Angbike个人博客 > Html+Css > CSS自定义checkbox开关(switch)样式

CSS自定义checkbox开关(switch)样式

显示图如下(灯光 雨刷):
1.png
注:如果需要改变Style请自行根据情况来修改CSS

HTML代码:

<input class="ag-switch ag-switch-animbg" type="checkbox"/>

CSS代码:

.ag-switch {
    width: 100%;
    height: 23px;
    position: relative;
    box-shadow: 0px 1px 1px #999 inset;
    border: 1px solid #dfdfdf;
    background-color: #f7f7f7;
    border-radius: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background-clip: content-box;
    display: inline-block;
    -webkit-appearance: none;
    user-select: none;
    outline: none;
    cursor: pointer
}

.ag-switch:focus {
    outline: 0 !important
}

.ag-switch::-moz-focus-inner {
    border-color: transparent !important
}

.ag-switch:before {
    content: '';
    width: 21px;
    height: 21px;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.4)
}

.ag-switch:checked {
    box-shadow: 0px 1px 1px #999 inset;
    background-color: #99daf6
}

.ag-switch:checked:before {
    left: calc(100% - 21px)
}

.ag-switch.ag-switch-animbg {
    transition: background-color ease .4s
}

.ag-switch.ag-switch-animbg:before {
    transition: left .3s
}

.ag-switch.ag-switch-animbg:checked {
    box-shadow: 0px 1px 1px #999 inset;
    background-color: #99daf6;
    transition: border-color .4s,background-color ease .4s
}

.ag-switch.ag-switch-animbg:checked:before {

transition: left .3s

}

以上switch在火狐会出现兼容问题,显示为原有checkbox样式,如果需要在火狐浏览器下显示请替换为以下代码:
HTML代码:

<label class="ag-switch">
     <input type="checkbox" id="haeundaeWipers"/>
     <i></i>
</label>

CSS代码:

.ag-switch {
    position: relative;
    display: inline-block;
    width: 90px;
    height: 23px;
    border-radius: 15px;
    background-color: #f7f7f7;
    border: 1px solid #dcdcdc;
    box-shadow: 0px 1px 1px #999 inset;
    overflow: hidden;
    vertical-align: middle;
    cursor: pointer
}

.ag-switch input {
    visibility: hidden
}

.ag-switch i {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: calc(25% - 1px);
    height: 100%;
    border-radius: 100%
}

.ag-switch i::before {
    content: " ";
    display: none;
    width: 600%;
    height: 100%;
    border-radius: 10%;
    background-color: #99daf6;
    box-shadow: 0px 1px 1px #999 inset
}

.ag-switch i::after {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.4)
}

.ag-switch input:checked+i {
    transform: translateX(100%);
    -webkit-transform: translateX(315%)
}

.ag-switch input:checked+i:before {
    display: inline-block;
    transform: translateX(-60%)
}

博客评论已关闭