html中switch怎么写,如何用css3实现switch组件开关的方法

本文介绍了用css3实现switch组件的方法，分享给大家，具体如下：

基于表单的checkbox

效果图

原理

checkbox, 有两种状态, 没选中和选中, 当选中的时候(:checked), 改变样式即可, 首先得清除浏览器默认的样式, apperance: none, 本文代码只在chrome中运行, 如果需要写兼容性代码, 给apperance和transition加上前缀就好

html代码

css代码

// switch组件

.switch-component {

position: relative;

width: 60px;

height: 30px;

background-color: #dadada;

border-radius: 30px;

border: none;

outline: none;

-webkit-appearance: none;

transition: all .2s ease;

}

// 按钮

switch-component::after {

content: '';

position: absolute;

top: 0;

left: 0;

width: 50%;

height: 100%;

background-color: #fff;

border-radius: 50%;

transition: all .2s ease;

}

// checked状态时，背景颜色改变

.switch-component:checked {

background-color: #86c0fa;

}

// checked状态时，按钮位置改变

.switch-component:checked::after {

left: 50%;

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。