如何使用 CSS 设置与选定单选输入关联的标签和选中复选框的样式？

在Web开发中，我们经常需要使用表单元素，其中包括单选框和复选框。当用户选择这些元素时，我们可能需要对它们的样式进行一些调整。本文将介绍如何使用CSS来设置单选输入关联的标签和选中复选框的样式。

如何设置单选输入关联的标签的样式

HTML中单选输入通常是通过<input type="radio">元素实现的，它们通常与<label>元素一起使用。为了将标签与单选框关联起来，我们可以使用for属性，该属性的值应该与<input>元素的id属性相匹配。

例如，我们有如下HTML代码：

<label for="male">Male</label>
<input type="radio" id="male" name="gender" value="male">
<label for="female">Female</label>
<input type="radio" id="female" name="gender" value="female">

这里<label>元素的for属性与<input>元素的id属性相对应。当用户单击标签时，与之相关联的单选框将会被选中。

要调整单选框与标记之间的样式，我们可以使用以下样式规则：

input[type="radio"] {
  display: none;
}
input[type="radio"] + label:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 10px;
  border: 2px solid #ccc;
  border-radius: 50%;
}
input[type="radio"]:checked + label:before {
  background-color: #007bff;
  border-color: #007bff;
}

上述代码中，我们使用了 CSS3的 :before伪元素来创建与单选框相关联的标签。我们还使用content属性来指定标记的内容为空。然后我们使用display: inline-block将<label>元素的显示模式设置为inline-block，这样它就具有了宽度和高度。

接下来，我们使用 + 相邻兄弟选择器来选择紧接在<input>元素后面的<label>元素，并使用before伪元素来添加样式。我们设置了圆形的样式，并将边框颜色设置为灰色。

最后，我们使用 :checked 选择器来针对选中的单选框更改样式。在这种情况下，我们将背景色和边框颜色都设置为蓝色（或使用你自己的颜色）。

如何设置选中复选框的样式

HTML中复选框通常是通过<input type="checkbox">元素实现的。当用户选择一个复选框时，我们可能需要对它的样式进行调整。与单选框不同，复选框没有关联的标记。我们可以使用<label>元素来模拟关联的标记，方法是将<input>元素包装在<label>元素内。

例如，我们有如下HTML代码：

<label>
  <input type="checkbox" name="vehicle1" value="Bike"> I have a bike
</label>
<label>
  <input type="checkbox" name="vehicle2" value="Car"> I have a car
</label>

对于上面的HTML代码，我们可以使用以下CSS样式规则来美化复选框：

input[type="checkbox"] {
  display: none;
}
input[type="checkbox"] + label:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 10px;
  border: 2px solid #ccc;
  border-radius: 2px;
}
input[type="checkbox"]:checked + label:before {
  content: "\2713";
  background-color: #007bff;
  border-color: #007bff;
  color: #fff;
  font-size: 14px;
  text-align: center;
  line-height: 16px;
}

上述代码中，我们使用了类似于单选框的方法来隐藏了复选框元素的可见性。我们然后使用:before伪元素来创建与复选框相关联的标记。

与单选框的区别在于我们没有使用相邻兄弟选择器，因为我们的标记是<input>元素的包装器。我们只需要使用复选框元素和:before伪元素的选择器来选择隐藏的复选框并添加样式。

类似单选框的情况下，我们使用:checked选择器来确定选中的复选框，并添加一个标记（正文为“\2713”）和附加样式。最后，我们设置了颜色、字体大小和行高等样式属性。

至此，我们介绍了如何使用CSS来设置单选输入关联的标签和选中复选框的样式。这些CSS样式可以帮助你更好地掌握表单元素的样式，让你的Web应用程序更加完美。