Material Design 是谷歌推出的一种新的设计语言,它以平面化的设计,富有层次感的动画和强调用户体验为特点,成为现代 web 设计的一个重要趋势。其中的组件样式,如复选框和单选按钮,也成为了前端开发人员经常需要实现的一部分。
本文将介绍如何使用 CSS 实现 Material Design 风格的复选框和单选按钮样式,并附有示例代码。
复选框
Material Design 风格的复选框具有圆形的勾选区域和清晰的动画效果。首先,在 HTML 中定义一个复选框的基本结构:
<label class="mdl-checkbox mdl-js-checkbox"> <input type="checkbox" class="mdl-checkbox__input"> <span class="mdl-checkbox__label">选项</span> </label>
接着,需要在 CSS 中定义复选框和勾选的样式:
-- -------------------- ---- ------- -- --- -- ------------- - -------- ------------- --------- --------- ------- -------- ---------- ----- ------------ ----- - -------------------- - -------- ----- - -- -- -- ---------------------------- - -------- ------ --------- --------- ---- -- ----- -- ------ ----- ------- ----- -------- -- -------------- ---- -------- --- ----------------- ----- ------- --- ----- ----- - ---------------------------- - ---------------------------- - ----------------- -------- ------------- -------- - --------------------------- - --------- --------- ---- ---- ----- ---- ------ ---- ------- ----- -------- --- ------- ----- ----- ------------- - --- --- -- ---------- -------------- -------- -- ----------- ------- ---- ------------ - ---------------------------- - --------------------------- - -------- -- -
至此,一个 Material Design 风格的复选框就完成了。可以使用 .mdl-checkbox
类来定义整个复选框的样式,.mdl-checkbox__input
类来定义输入框的样式,.mdl-checkbox__label
类来定义文字标签的样式。
单选按钮
Material Design 风格的单选按钮也具有圆形的选择区域和清晰的动画效果。与复选框不同,单选按钮需要定义多个相同的选择项,其中只有一个被选中。在 HTML 中定义单选按钮的基本结构:
<label class="mdl-radio mdl-js-radio" for="option1"> <input type="radio" id="option1" class="mdl-radio__input" name="options"> <span class="mdl-radio__label">选项 1</span> </label> <label class="mdl-radio mdl-js-radio" for="option2"> <input type="radio" id="option2" class="mdl-radio__input" name="options"> <span class="mdl-radio__label">选项 2</span> </label>
注意,要为每个单选按钮定义不同的 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