如何用Css3实现Switch组件

ゞ浴缸里的玫瑰 2022-01-07 03:29 214阅读 0赞

基于表单的Checkbox

效果图

![Image 1][]

switch.gif

原理  
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%;
     }

[Image 1]:

发表评论取消回复

表情：

评论列表（有 0 条评论，214人围观）

还没有评论，来说两句吧...

相关阅读

相关 switch组件设置大小

只要在css里加了zoom: .8;就可以了 switch{ zoom: .8;} 结果如下 ![在这里插入图片描述][20191129170044233.pn

àì夳堔傛蜴生んèń/ 2023年06月17日 15:58/ 0 赞/ 167 阅读

相关 vue switch组件

组件 <template> <view> <view class="weui-switch" :class="{'weui-switch-o

左手的ㄟ右手/ 2022年10月02日 11:51/ 0 赞/ 196 阅读

相关 CSS3 Switch

![在这里插入图片描述][20181031102645577.gif] 除了下面这种方案实现switch，还可以使用 before + after 配合上 opacity 透

以你之姓@/ 2022年05月16日 14:30/ 0 赞/ 178 阅读

相关 css3 switch开关的实现

<input type="checkbox" id="switch" /><label for="switch">Toggle</label> inp

逃离我推掉我的手/ 2022年05月14日 04:53/ 0 赞/ 240 阅读

相关如何用 CSS 和 D3 创作一组摆线

![在这里插入图片描述][20181207114552218.gif] 效果预览 [在线演示][Link 1] 按下右侧的“点击预览”按钮可以在当前页面预览，点击链接

淩亂°似流年/ 2022年04月08日 08:39/ 0 赞/ 238 阅读

相关 React Native Switch 组件大小

<Switch style={ { transform: [{ scaleX: 1.4 }, { scaleY: 1.4}

- 日理万妓/ 2022年03月22日 02:18/ 0 赞/ 194 阅读

相关 css3实现switch开关效果

[css3实现switch开关效果][css3_switch] 之前阿里电面的时候问的一个问题，今天抽时间做了个demo。 ![997342-2016083014134

悠悠/ 2022年01月30日 19:51/ 0 赞/ 429 阅读

相关如何用Css3实现Switch组件

基于表单的Checkbox 效果图 ![Image 1][] switch.gif 原理 Checkbox, 有两种状态, 没选中和选中, 当选中的时候(:c

ゞ浴缸里的玫瑰/ 2022年01月07日 03:29/ 0 赞/ 215 阅读

相关用CSS写一个开关Switch

效果如下： ![2019080320023518.png][] 代码如下： HTML: <input class='switch-component' type

偏执的太偏执、/ 2021年11月10日 23:01/ 0 赞/ 391 阅读

相关 10.3 常用组件，容器

常用组件容器一：常用组件可以在命令窗口反编译组件查看组件的属性和方法 javap javax.swing.JComponent

逃离我推掉我的手/ 2021年09月30日 15:32/ 0 赞/ 268 阅读