使用 CSS 实现 Material Design 风格的复选框和单选按钮样式

阅读时长 6 分钟读完

Material Design 是谷歌推出的一种新的设计语言,它以平面化的设计,富有层次感的动画和强调用户体验为特点,成为现代 web 设计的一个重要趋势。其中的组件样式,如复选框和单选按钮,也成为了前端开发人员经常需要实现的一部分。

本文将介绍如何使用 CSS 实现 Material Design 风格的复选框和单选按钮样式,并附有示例代码。

复选框

Material Design 风格的复选框具有圆形的勾选区域和清晰的动画效果。首先,在 HTML 中定义一个复选框的基本结构:

接着,需要在 CSS 中定义复选框和勾选的样式:

-- -------------------- ---- -------
-- --- --
------------- -
  -------- -------------
  --------- ---------
  ------- --------
  ---------- -----
  ------------ -----
-

-------------------- -
  -------- -----
-

-- -- --
---------------------------- -
  -------- ------
  --------- ---------
  ---- --
  ----- --
  ------ -----
  ------- -----
  -------- --
  -------------- ----
  -------- ---
  ----------------- -----
  ------- --- ----- -----
-

---------------------------- - ---------------------------- -
  ----------------- --------
  ------------- --------
-

--------------------------- -
  --------- ---------
  ---- ----
  ----- ----
  ------ ----
  ------- -----
  -------- ---
  ------- ----- -----
  ------------- - --- --- --
  ---------- --------------
  -------- --
  ----------- ------- ---- ------------
-

---------------------------- - --------------------------- -
  -------- --
-

至此,一个 Material Design 风格的复选框就完成了。可以使用 .mdl-checkbox 类来定义整个复选框的样式,.mdl-checkbox__input 类来定义输入框的样式,.mdl-checkbox__label 类来定义文字标签的样式。

单选按钮

Material Design 风格的单选按钮也具有圆形的选择区域和清晰的动画效果。与复选框不同,单选按钮需要定义多个相同的选择项,其中只有一个被选中。在 HTML 中定义单选按钮的基本结构:

注意,要为每个单选按钮定义不同的 id,同时将它们的 name 属性设为相同的值。

接着,在 CSS 中定义单选按钮和选择的样式:

-- -------------------- ---- -------
-- ---- --
---------- -
  -------- -------------
  --------- ---------
  ------- --------
  ---------- -----
  ------------ -----
-

----------------- -
  -------- -----
-

-- -- --
------------------------- -
  -------- ------
  --------- ---------
  ---- --
  ----- --
  ------ -----
  ------- -----
  -------- --
  -------------- ----
  -------- ---
  ----------------- -----
  ------- --- ----- -----
-

------------------------- - ------------------------- -
  ----------------- --------
  ------------- --------
-

------------------------ -
  --------- ---------
  ---- ----
  ----- ----
  ------ ----
  ------- ----
  -------- ---
  -------------- ----
  ----------------- -----
  -------- --
  ----------- ------- ---- ------------
-

------------------------- - ------------------------ -
  -------- --
-

现在,一个 Material Design 风格的单选按钮就完成了。我们可以使用 .mdl-radio 类来定义整个单选按钮的样式,.mdl-radio__input 类来定义输入框的样式,.mdl-radio__label 类来定义文字标签的样式。

结语

通过本文,可以看到使用 CSS 实现 Material Design 风格的复选框和单选按钮其实很简单。只需要定义好结构和样式,就能拥有漂亮的界面和流畅的动画效果。同时,这种风格也能与其它 Material Design 组件共同使用,让整个 web 应用更加统一和美观。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/679740d6504e4ea9bde51450

纠错
反馈