MIUI选项框开关样式模拟

有IOS的开关模拟,当然也有MIUI的开关模拟 看到设置选项里面的开关样式,突发奇想地来试试

最终效果如图:

实现过程

1. 选项框checkbox 

模拟开关当然需要一个选项框,这里用到了复选框checkbox

2. 理解开关的过程

点击开关按钮,则开启或关闭。原生的checkbox无法做到图示的效果,所以就需要额外的元素来表示图中的开关

而我们又要使用到checkbox的点击效果以及点击后是否选中(checked)的效果,所以checkbox不能隐藏,但可以用覆盖的方式

为了减少多余标签的使用,可以使用伪元素:before、:after ,标签结构为

  <div class="switch-wrap">
        <span><span class="switch-action">开启</span>WLAN</span>
        <label class="switch">
            <input type="checkbox" name="switch" id="switch">
        </label>
    </div>

3. 开关的实现

用:before伪元素作为开关背景层,用:after伪元素作为开关项(即那个小圆圈)

        .switch input:before {
            content: '';
            display: inline-block;
            position: relative;
            border-radius: 20px;
            border: 1px solid #ccccc6;
            box-shadow: 0 0 1px 1px #ececf3;
            background-color: #fff;
            cursor: pointer;
        }
        .switch input:after {
            content: '';
            position: absolute;
            width: 12px;
            height: 12px;
            top: 2px;
            left: 3px;
            border-radius: 50%;
            background-color: #ccccc6;
            transition: .2s left, .2s background-color;
        }

初始小圆圈在左侧,当开关状态为开启时,右移,并更新开启状态的背景色

        .switch input:checked:after {
            left: 15px;
            background-color: #36a6fa;
            transition: .2s left, .2s background-color;
        }

以上就是关键的代码了,以下为完整的样式

 1 <style>
 2     .switch-wrap {
 3             position: relative;
 4             margin: 50px auto;
 5             width: 120px;
 6             height: 40px;
 7             font: 14px/1.5 Arial, Sans-Serif;
 8         }
 9 
10         .switch,
11         .switch input,
12         .switch input:before {
13             width: 30px;
14             height: 14px;
15         }
16 
17         .switch input {
18             position: absolute;
19             right: 0;
20         }
21 
22         .switch input:before {
23             content: '';
24             display: inline-block;
25             position: relative;
26             border-radius: 20px;
27             border: 1px solid #ccccc6;
28             box-shadow: 0 0 1px 1px #ececf3;
29             background-color: #fff;
30             cursor: pointer;
31         }
32 
33         .switch input:after {
34             content: '';
35             position: absolute;
36             width: 12px;
37             height: 12px;
38             top: 2px;
39             left: 3px;
40             border-radius: 50%;
41             background-color: #ccccc6;
42             transition: .2s left, .2s background-color;
43         }
44 
45         .switch input:checked:after {
46             left: 15px;
47             background-color: #36a6fa;
48             transition: .2s left, .2s background-color;
49         }
50 
51 
52     </style>

4. 开关的测试

最后,可结合JS检测一下开关的状态变化

    <script src="jquery.js"></script>
    <script type="text/javascript">
        $('#switch').change(function() {
            $('.switch-action').text(this.checked ? '关闭' : '开启');
        });
    </script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏我的博客

安卓开发之事件

事件处理:提供为用户动作响应的机制 Android提供两种方式的事件处理 一、基于回调的事件处理 二、基于监听的事件处理 事件监听处理模型中三类对象: 事件源:...

2235
来自专栏编程坑太多

「小程序JAVA实战」 小程序默认加载的页面和生命周期(八)

952
来自专栏超然的博客

mpvue-小程序之蹲坑记

mpvue 是兼容微信小程序的生命周期与 vue 的生命周期,vue 实例会接管小程序 Page 实例的生命钩子,因此需要使用到小程序的生命周期钩子时,可将相应...

5892
来自专栏前端小记

React + TS + Ant Design 裁包小记

前段时间做了一个项目,是使用 Create-React-App 脚手架 + TypeScript + Ant Design 组件库搭建的,在减少包体积上有一些...

58312
来自专栏从零开始学自动化测试

Selenium2+python自动化46-js解决click失效问题

前言 有时候元素明明已经找到了,运行也没报错,点击后页面没任何反应。这种问题遇到了,是比较头疼的,因为没任何报错,只是click事件失效了。 本篇用2种方法解决...

2956
来自专栏微信小程序开发

说说小程序中textarea的坑

有很多用户都给我家小程序客服反馈,说是页面无法输入内容,集中在微信6.6.7版本,之前的微信版本都正常。

2.1K3
来自专栏格子的个人博客

MongoDB 3.4 - 复制集、鉴权、主从同步以及读写分离

老惯例之碎碎念。 厦门的夏天又来了,热得整个人都没脾气了。 最近忙得连轴转,博客也停了很久,空闲下来还是要继续写的。

1892
来自专栏向治洪

React Native开发之调试

在做React Native开发时,少不了的需要对React Native程序进行调试。调试程序是每一位开发者的基本功,高效的调试不仅能提高开发效率,也能降低B...

2768
来自专栏vue学习

22、商品列表页

(3)商品列表 对于商品列表我们可以把里面的单个商品item用封装成一个组件从而实现复用。

3083
来自专栏琦小虾的Binary

HTML 表单 (form) 的作用解释

参考网址: 《HTML中form表单作用解释》 表单在网页中主要负责的是数据采集功能,一个表单基本由三部分组成: 表单标签:这里面包含了处理表...

3487

扫码关注云+社区

领取腾讯云代金券