Material Design 是 Google 推出的一种设计语言，旨在为各种平台和设备提供一致的用户体验。其中，RadioButton 和 CheckBox 是常见的表单控件，本文将介绍如何使用 Material Design 风格的样式来美化这些控件。
RadioButton 样式
在 Material Design 中，RadioButton 通常使用圆形按钮来表示选中状态。我们可以使用 CSS 中的伪元素 ::before 来实现这个效果。具体代码如下：
// javascriptcn.com 代码示例
input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
input[type="radio"] + label::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
margin-right: 8px;
border-radius: 50%;
border: 2px solid #757575;
}
input[type="radio"]:checked + label::before {
background-color: #2196F3;
}上述代码中，我们首先将 RadioButton 的实际大小设置为 0，并使用伪元素 ::before 来创建一个圆形按钮。当 RadioButton 被选中时，我们将其对应的伪元素的背景色设置为 Material Design 的主题色 #2196F3。
在 HTML 中，我们需要将 RadioButton 和对应的 label 元素关联起来，代码如下：
<input type="radio" id="radio1" name="group1"> <label for="radio1">选项1</label>
CheckBox 样式
在 Material Design 中，CheckBox 通常使用方形按钮来表示选中状态。我们同样可以使用伪元素 ::before 来实现这个效果。具体代码如下：
// javascriptcn.com 代码示例
input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
input[type="checkbox"] + label::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
margin-right: 8px;
border-radius: 2px;
border: 2px solid #757575;
}
input[type="checkbox"]:checked + label::before {
content: "\2713";
text-align: center;
font-size: 16px;
line-height: 18px;
color: #2196F3;
}上述代码中，我们同样将 CheckBox 的实际大小设置为 0，并使用伪元素 ::before 来创建一个方形按钮。当 CheckBox 被选中时，我们将其对应的伪元素的内容设置为一个打勾的符号，并将其颜色设置为 Material Design 的主题色 #2196F3。
在 HTML 中，我们同样需要将 CheckBox 和对应的 label 元素关联起来，代码如下：
<input type="checkbox" id="checkbox1"> <label for="checkbox1">选项1</label>
总结
本文介绍了如何使用 CSS 中的伪元素来实现 Material Design 风格的 RadioButton 和 CheckBox 样式。这种样式不仅美观，而且符合 Material Design 的设计原则，提高了用户体验。希望本文能对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655f3295d2f5e1655d964266