用CSS写一个开关Switch

偏执的太偏执、 2021-11-10 23:01 363阅读 0赞

效果如下：

![2019080320023518.png][]

代码如下：

HTML:

<input class='switch-component' type='checkbox'>

CSS(进行了浏览器的前缀兼容):

.switch-component {
      position: relative;
      width: 60px;
      height: 30px;
      background-color: #dadada;
      border: none;
      outline: none;
      -webkit-border-radius: 30px;
      -moz-border-radius: 30px;
      -o-border-radius: 30px;
      -os-border-radius: 30px;
      -webkit-appearance: none;    /*取消checkbox的默认样式*/
      -moz-appearance: none;
      -o-appearance: none;
      -os-appearance: none;
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -o-transition: all 0.2s ease;
      -os-transition: all 0.2s ease;
    }
    
    .switch-component::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 50%;
      height: 100%;
      background-color: #fff;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      -o-border-radius: 50%;
      -os-border-radius: 50%;
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -o-transition: all 0.2s ease;
      -os-transition: all 0.2s ease;
    }
    
    .switch-component:checked {
      background-color: #108EE8;
    }
    
    .switch-component:checked::after {
      left: 50%;
     }

上面就绘制一个开关成功了

**提示：我们要选择状态只要用js判断checkbox的checked是否为true就好了；**

以上就是用CSS写的开关

[2019080320023518.png]: /images/20211109/5accab9147b8450ab59b50144e7159cc.png

发表评论取消回复

表情：

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

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

相关阅读

相关 HTML/CSS 自定义开关按钮控件(switch)样式

今天这篇文章给大家带来的是在移动端很常见的开关按钮控件。样式主要是通过CSS来定制完成，上一篇博客讲的是[自定义滑动条的样式][Link 1]，同样是自定义样式，上一篇是直接通

Dear 丶/ 2022年07月21日 12:13/ 0 赞/ 670 阅读

相关 ToggleButton(开关按钮)和Switch(开关)的使用

ToggleButton属性： android:disabledAlpha：设置按钮在禁用时的透明度 android:textOff：按钮没有被选中时显示的文字

淡淡的烟草味﹌/ 2022年06月17日 03:46/ 0 赞/ 352 阅读

相关前端经验_纯CSS写一个开关按钮

写个开关按钮,效果如图： ![这里写图片描述][70] 当点击的时候： ![这里写图片描述][70 1] 利用CSS3 过渡的动画效果结构上写一个输入框为Ch

桃扇骨/ 2022年05月21日 04:39/ 0 赞/ 280 阅读

相关 bootstrap-switch开关组件

原文地址：[https://blog.csdn.net/mafan121/article/details/50402070][https_blog.csdn.net_mafan

你的名字/ 2022年05月14日 07:23/ 0 赞/ 478 阅读

相关 css3实现switch开关效果

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

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

相关用CSS写一个开关Switch

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

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

相关 css写一个原生switch开关按钮

> 你好，我是Vam的金豆之路，可以叫我豆哥。2019年年度博客之星、技术领域博客专家。主要领域：前端开发。我的微信是 maomin9761，有什么疑问可以加我哦，自己创建了一

向右看齐/ 2021年08月27日 12:52/ 0 赞/ 517 阅读

相关 rn 开关组件Switch

开关组件 1、引入 import { View, Switch, StyleSheet } from "react-native";

蔚落/ 2021年07月25日 01:08/ 0 赞/ 589 阅读

相关 rn 开关组件Switch

1、引入 import { View, Switch, StyleSheet } from "react-native"; 2、使用

我就是我/ 2021年07月24日 20:19/ 0 赞/ 553 阅读

相关重构-开关Switch

收获: 当给根类设置transition:ns时,当根类的属性变化都会产生过渡态,即当再添加一个类,这个类出现/消失会出现两种过渡态动画:

素颜马尾好姑娘i/ 2021年07月24日 13:00/ 0 赞/ 456 阅读