html css开关按钮样式
时间: 2023-06-27 16:01:00 浏览: 64
下面是一个基本的 HTML/CSS 开关按钮样式,你可以根据自己的需求进行修改。
HTML 代码:
```
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
```
CSS 代码:
```
/* 开关按钮容器样式 */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* 开关按钮输入框样式 */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* 开关按钮圆形样式 */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
border-radius: 34px;
}
/* 开关按钮圆形滑块样式 */
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
}
/* 开关按钮选中状态样式 */
input:checked + .slider {
background-color: #2196F3;
}
/* 开关按钮选中状态圆形滑块样式 */
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
```
可以将上面的代码复制粘贴到你的 HTML 和 CSS 文件中,并根据需要进行修改和优化。