如何使用 CSS 设置与选中的单选按钮和选中的复选框关联的标签样式?
与单选按钮和复选框关联的标签是创建用户友好型 Web 表单的关键组件。设置标签样式不仅可以使表单看起来更美观，还可以通过提供有关所选选项的视觉提示来提升用户体验。
HTML 中的标签用于将描述与输入元素(例如文本输入框、复选框、单选按钮或下拉列表)关联起来。此元素通常出现在输入元素之前，并提供清晰简洁的描述，说明输入元素的用途。
HTML 中的输入元素用于收集表单中的用户输入数据。它们可以包含各种类型的输入字段，例如文本、密码、电子邮件、数字、日期、复选框、单选按钮等等。输入元素指定应收集的数据类型、数据格式以及提交前应应用于数据的任何验证规则。
在本文中，我们将学习如何使用 CSS 为选中的单选按钮和选中的复选框关联的标签设置样式。我们还将学习为标签设置样式的不同方法及其语法和示例。
使用 CSS 设置标签样式的不同方法
有多种方法可用于使用 CSS 为选中的单选按钮和选中的复选框关联的标签设置样式。让我们来看看一些常用的标签样式方法。
方法 1:使用 :Checked 选择器
在此方法中，我们将使用 :checked 选择器在 CSS 中为选中的单选按钮和选中的复选框关联的标签设置样式。在此方法中，使用 :checked 选择器为选中的单选按钮和选中的复选框关联的标签设置样式。 :checked 选择器用于选择当前已选中的元素，包括单选框和复选框。选中元素的标签样式通过使用 + 选择器来设置，该选择器指向紧跟选中元素的标签。
语法
以下是使用 :checked 选择器设置输入框样式的语法。
input[type="radio"]:checked + label,
input[type="checkbox"]:checked + label {
/* 在此处添加样式以设置输入框的样式 */
}
示例
在给定的示例中，背景颜色和颜色属性用于在选中相关输入框时将标签文本的背景颜色更改为绿色，颜色更改为白色。
<html>
<head>
<title>Styling Labels for Checked Inputs using CSS</title>
<style>
input[type="radio"]:checked+label,
input[type="checkbox"]:checked+label {
background-color: green;
color: white;
}
</style>
</head>
<body>
<h2>Styling Labels for Checked Inputs using CSS</h2>
<form>
<input type="radio" id="option1" value="option1">
<label for="option1">Option 1</label> <br>
<input type="radio" id="option2" value="option2">
<label for="option2">Option 2</label> <br>
<input type="radio" id="option3" value="option3">
<label for="option3">Option 3</label> <br>
<input type="checkbox" id="check1" value="option1">
<label for="check1">Checkbox 1</label> <br>
<input type="checkbox" id="check2" value="option2">
<label for="check2">Checkbox 2</label> <br>
<input type="checkbox" id="check3" value="option3">
<label for="check3">Checkbox 3</label>
</form>
</body>
</html>
方法 2:使用 :Checked 选择器和 :Before 伪元素
在此方法中，我们将使用 :checked 选择器和 :before 伪元素，在 CSS 中为选中的单选框和选中的复选框设置样式。 :checked 选择器和 :before 伪元素用于为仅在关联输入框被选中时应用的标签创建自定义样式。
语法
以下是使用 :checked 选择器和 :before 伪元素设置输入框样式的语法。
input[type="radio"]:checked + label:before,
input[type="checkbox"]:checked + label:before {
/* 在此处添加样式以设置输入框标签的样式 */
}
示例
在给定的示例中，我们使用 content 属性，通过 :before 伪元素在标签文本前添加自定义符号。此外，背景颜色也设置为蓝色。
<html>
<head>
<title>Styling Labels for Checked Inputs using CSS</title>
<style>
input[type="radio"]:checked + label:before {
content: "\25CF";
margin-right: 8px;
background-color: blue;
}
input[type="checkbox"]:checked + label:before {
content: "\2611";
margin-right: 8px;
background-color: blue;
}
</style>
</head>
<body>
<h2>Styling Labels for Checked Inputs using CSS</h2>
<form>
<input type="radio" id="option1" value="option1">
<label for="option1">Option 1</label> <br>
<input type="radio" id="option2" value="option2">
<label for="option2">Option 2</label> <br>
<input type="radio" id="option3" value="option3">
<label for="option3">Option 3</label> <br>
<input type="checkbox" id="check1" value="option1">
<label for="check1">Checkbox 1</label> <br>
<input type="checkbox" id="check2" value="option2">
<label for="check2">Checkbox 2</label><br>
<input type="checkbox" id="check3" value="option3">
<label for="check3">Checkbox 3</label>
</form>
</body>
</html>
方法 3:使用 :After 和 :Before 伪元素
在此方法中，我们将使用 :after 和 :before 伪元素在 CSS 中为选中的单选框和选中的复选框设置样式。这些伪元素用于在元素之前或之后插入内容，可用于为标签创建自定义样式。
语法
以下是使用 :after 和 :before 伪元素设置输入框样式的语法。
input[type="radio"] + label:before,
input[type="checkbox"] + label:before {
/* 在此处添加 :before 样式以设置输入框标签的样式 */
}
input[type="radio"] + label:after,
input[type="checkbox"] + label:after {
/* 在此处添加 :after 样式以设置输入框标签的样式 */
}
示例
在给定的示例中，我们使用了多个属性，例如 margin-right、color、padding 和 content 属性，在使用 :after 和 :before 伪元素标记文本。同时，背景颜色也设置为绿色。
<html>
<head>
<title>Styling Labels for Checked Inputs using CSS</title>
<style>
input[type="radio"] + label:before {
content: "\25CF";
margin-right: 5px;
background-color: green;
color: white;
padding: 0 5px;
}
input[type="checkbox"] + label:before {
content: "\2610";
margin-right: 5px;
background-color: green;
color: white;
padding: 0 5px;
}
</style>
</head>
<body>
<h2>Styling Labels for Checked Inputs using CSS</h2>
<form>
<input type="radio" id="option1" value="option1">
<label for="option1">Option 1</label> <br>
<input type="radio" id="option2" value="option2">
<label for="option2">Option 2</label> <br>
<input type="radio" id="option3" value="option3">
<label for="option3">Option 3</label> <br>
<input type="checkbox" id="check1" value="option1">
<label for="check1">Checkbox 1</label><br>
<input type="checkbox" id="check2" value="option2">
<label for="check2">Checkbox 2</label> <br>
<input type="checkbox" id="check3" value="option3">
<label for="check3">Checkbox 3</label>
</form>
</body>
</html>
结论
使用 CSS 为单选按钮和复选框等输入元素的标签添加样式，是提升 Web 应用程序中 Web 表单用户体验的重要工具。本文学习了设置标签样式的不同方法，包括使用 :checked 选择器、:before 和 :after 伪元素，以及将选择器与不同属性组合使用。通过为已选中的单选按钮和复选框的标签应用自定义样式，用户可以轻松识别他们选择的选项。本文学习的样式方法有助于在我们的 Web 应用程序中创建更直观、更人性化的表单，从而提升网站的整体可用性。
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
