html+css开关 Checkbox

最新推荐文章于 2025-10-21 13:00:29 发布

原创

最新推荐文章于 2025-10-21 13:00:29 发布 · 206 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #前端

效果

CSS代码

.uiswitch {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    height: 31px;
    width: 51px;
    position: relative;
    border-radius: 16px;
    cursor: pointer;
    outline: 0;
    z-index: 0;
    margin: 0;
    padding: 0;
    border: none;
    background-color: #e5e5e5;
    -webkit-transition-duration: 600ms;
    -moz-transition-duration: 600ms;
    transition-duration: 600ms;
    -webkit-transition-timing-function: ease-in-out;
    -moz-transition-timing-function: ease-in-out;