css3实现switch组件开关
程序员文章站
2022-04-21 22:35:22
...
本文主要和大家介绍了如何用css3实现switch组件的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。
基于表单的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%; }
相关推荐:
以上就是css3实现switch组件开关的详细内容,更多请关注其它相关文章!
推荐阅读
-
css3和jquery实现自定义checkbox和radiobox组件
-
bootstrap switch开关组件使用方法详解
-
layui中的switch开关实现方法
-
Android中Switch组件开关状态保存的问题
-
VUE实现Studio管理后台(九):开关(Switch)控件,输入框input系列
-
通过if else和switch开关语句与随机数实现模拟猜拳小游戏
-
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
-
Flutter之CupertinoSwitch和Switch开关组件的简单使用
-
flutter 单选框按钮组件Radio、单选框卡片组件 RadioListTile、开关组件Switch、开关卡片组件SwitchListTile
-
css3实现switch开关效果