前言
Material Design 是一种由 Google 推出的设计语言，主要用于移动应用和 Web 应用的界面设计。其设计风格简洁、扁平化、注重色彩和动效，被广泛应用于各种应用程序中。
其中，开关按钮是 Material Design 风格中常用的一种组件。本文将介绍如何使用 CSS 自定义 Material Design 风格的开关按钮。
原理
Material Design 风格的开关按钮主要由两部分组成：一个圆形按钮和一个滑动条。当圆形按钮被按下时，滑动条会沿着轨道向左或向右移动，表示开关状态的改变。
我们可以通过修改按钮、滑动条以及相关元素的 CSS 样式来实现自定义开关按钮的效果。
步骤
第一步：定义 HTML 结构
在 HTML 中，需要定义出开关按钮的结构，包括圆形按钮、滑动条和一些状态变量。
<label class="switch"> <input type="checkbox" checked> <span class="slider"></span> </label>
注意，我们通过 label 标签包裹了 input 和 span 标签。这样做主要是为了方便用户点击整个开关按钮区域时可以触发开关切换事件。
第二步：定义 CSS 样式
在 CSS 中，可以定义各种样式来实现自定义的 Material Design 风格开关按钮。下面是一份比较完整的样式定义：
-- -------------------- ---- ------- ------- - --------- --------- -------- ------------- ------ ----- ------- ----- -------------- -- - ------- ----- - -------- ----- - ------- - --------- --------- ------- -------- ---- -- ----- -- ------ -- ------- -- ----------------- ----- ------------------- ---- ----------- ---- -------------- ----- - -------------- - --------- --------- -------- --- ------- ----- ------ ----- ----- ---- ------- ---- ----------------- ------ ------------------- ---- ----------- ---- -------------- ---- - ------------- - ------- - ----------------- -------- - ------------- - -------------- - ------------------ ----------------- -------------- ----------------- ---------- ----------------- -
解释一下每行代码的作用：
.switch：定义开关按钮的容器样式，包括位置、大小等；.slider：定义滑动条的样式，包括颜色、位置等；.slider:before：定义圆形按钮的样式，包括颜色、位置等；input:checked + .slider：当输入框被选中时，改变滑动条的颜色；input:checked + .slider:before：当输入框被选中时，改变圆形按钮的位置；
通过对这些样式的自定义，我们可以实现各种不同的 Material Design 风格开关按钮。
示例代码
下面是一份完整的示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------- ------ --------------
-------
------- -
--------- ---------
-------- -------------
------ -----
------- -----
-------------- --
-
------- ----- -
-------- -----
-
------- -
--------- ---------
------- --------
---- --
----- --
------ --
------- --
----------------- -----
------------------- ----
----------- ----
-------------- -----
-
-------------- -
--------- ---------
-------- ---
------- -----
------ -----
----- ----
------- ----
----------------- ------
------------------- ----
----------- ----
-------------- ----
-
------------- - ------- -
----------------- --------
-
------------- - -------------- -
------------------ -----------------
-------------- -----------------
---------- -----------------
-
--------
-------
------
------ ---------------
------ --------------- --------
----- ----------------------
--------
-------
-------通过修改 CSS 样式，可以实现各种不同的 Material Design 风格开关按钮，如下图所示：
结论
通过本文的介绍，我们可以发现，用 CSS 自定义 Material Design 风格的开关按钮是一件很简单的事情。只需要修改 HTML 结构和 CSS 样式即可实现各种不同风格的开关按钮。
最后，希望对前端开发者们有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6703b170d91dce0dc84c3767