手机纯css开关,纯 CSS开关-优快云博客

本文介绍了一种使用CSS实现可定制样式的开关按钮的方法。通过不同的状态和主题颜色变化，为用户提供良好的交互体验。同时，文章详细展示了如何通过CSS选择器和伪元素实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css

@import "https://fonts.googleapis.com/css?family=Raleway";

.switch-box {

display: block;

margin-top: 24px;

}

.switch-box .switch-box-slider {

position: relative;

display: inline-block;

height: 8px;

width: 32px;

background: #d5d5d5;

border-radius: 8px;

cursor: pointer;

transition: all 0.2s ease;

}

.switch-box .switch-box-slider:after {

position: absolute;

left: -8px;

top: -8px;

display: block;

width: 24px;

height: 24px;

border-radius: 50%;

background: #eeeeee;

box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);

content: '';

transition: all 0.2s ease;

}

.switch-box .switch-box-input {

display: none;

}

.switch-box .switch-box-input ~ .switch-box-label {

margin-left: 8px;

}

.switch-box .switch-box-input:checked ~ .switch-box-slider:after {

left: 16px;

}

.switch-box .switch-box-input:disabled ~ .switch-box-slider {

background: #e2e2e2;

cursor: default;

}

.switch-box .switch-box-input:disabled ~ .switch-box-slider:after {

background: #d5d5d5;

}

.switch-box.is-primary .switch-box-input:checked:not(:disabled) ~ .switch-box-slider {

background: #28e1bd;

}

.switch-box.is-primary .switch-box-input:checked:not(:disabled) ~ .switch-box-slider:after {

background: #1abc9c;

}

.switch-box.is-info .switch-box-input:checked:not(:disabled) ~ .switch-box-slider {

background: #5faee3;

}

.switch-box.is-info .switch-box-input:checked:not(:disabled) ~ .switch-box-slider:after {

background: #3498db;

}

.switch-box.is-success .switch-box-input:checked:not(:disabled) ~ .switch-box-slider {

background: #54d98c;

}

.switch-box.is-success .switch-box-input:checked:not(:disabled) ~ .switch-box-slider:after {

background: #2ecc71;

}

.switch-box.is-danger .switch-box-input:checked:not(:disabled) ~ .switch-box-slider {

background: #ed7669;

}

.switch-box.is-danger .switch-box-input:checked:not(:disabled) ~ .switch-box-slider:after {

background: #e74c3c;

}

.switch-box.is-warning .switch-box-input:checked:not(:disabled) ~ .switch-box-slider {

background: #eb9950;

}

.switch-box.is-warning .switch-box-input:checked:not(:disabled) ~ .switch-box-slider:after {

background: #e67e22;

}

body {

background: aquamarine;

font-family: Raleway, Arial, sans-serif;

height: 100vh;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

}