基础 CSS 遵守必需的单选和复选框

在 Web 应用程序开发中，单选和复选框是必不可少的控件。为了提高用户界面的可用性和易用性，我们需要使用 CSS 来对这些控件进行美化和样式定制。本文将介绍如何使用基础 CSS 为单选和复选框添加样式。

单选框

单选框是一种常见的控件，用于让用户在多个选项中选择一个。默认情况下，单选框的样式是系统默认的，不太美观。可以使用 CSS 来为单选框添加样式。

下面是一个基本的 HTML 单选框的示例：

<label>
  <input type="radio" name="gender" value="male">男
</label>
<label>
  <input type="radio" name="gender" value="female">女
</label>

为了为这些单选框添加样式，我们需要使用 CSS 的 :before 和 :after 伪元素来创建自定义的单选框图标。这里我们创建一个名为 .radio 的 CSS 类来为单选框添加样式：

.radio input[type="radio"] {
  display: none;
}

.radio label:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 1em;
  height: 1em;
  margin-right: 0.5em;
  border: 1px solid #aaa;
}

.radio input[type="radio"]:checked + label:before {
  background-color: #0af;
  border-color: #0af;
}

上述代码中，我们首先将单选框的实际控件隐藏了起来（display: none）；接着使用 :before 伪元素为单选框创建了一个圆形的图标，并稍微加了一点样式；最后使用 :checked 伪类为选中的单选框添加了样式。这样，单选框就被美化并且可以正常使用了。

复选框

除了单选框之外，复选框也是一种常见的控件，用于让用户选择多个选项。和单选框一样，复选框的样式也可以使用 CSS 进行定制和美化。

下面是一个基本的 HTML 复选框的示例：

<label>
  <input type="checkbox" name="language" value="html">HTML
</label>
<label>
  <input type="checkbox" name="language" value="css">CSS
</label>
<label>
  <input type="checkbox" name="language" value="javascript">JavaScript
</label>

我们可以使用类似单选框的方式来为复选框创建图标。下面是一个名为 .checkbox 的 CSS 类，用于为复选框添加样式：

.checkbox input[type="checkbox"] {
  display: none;
}

.checkbox label:before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.5em;
  border: 1px solid #aaa;
}

.checkbox input[type="checkbox"]:checked + label:before {
  content: "\2713";
  background-color: #0af;
  border-color: #0af;
  color: #fff;
  text-align: center;
  font-size: 0.8em;
  line-height: 0.8em;
}

和单选框类似，我们首先将复选框的实际控件隐藏了起来，然后使用 :before 伪元素为复选框创建一个正方形的图标，并稍微加了一点样式；最后使用 :checked 伪类为选中的复选框添加了样式。不同的是，我们在 :checked 伪类里面使用了 content 属性来在图标里面显示一个对勾。

结论

通过使用基础 CSS，我们可以为单选和复选框创建漂亮的图标和样式。这样可以提高 Web 应用程序的可用性和易用性，使用户界面看起来更加美观和专业。