时间:2021-07-01 10:21:17 帮助过:25人阅读
基于表单的checkbox
效果图
原理
checkbox, 有两种状态, 没选中和选中, 当选中的时候(:checked), 改变样式即可, 首先得清除浏览器默认的样式, apperance: none, 本文代码只在chrome中运行, 如果需要写兼容性代码, 给apperance和transition加上前缀就好
html代码
- <input class='switch-component' type='checkbox'>
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%;
- }
相关推荐:
微信小程序switch组件详细介绍
以上就是css3实现switch组件开关的详细内容,更多请关注Gxl网其它相关文章!