数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法学研究如何使用 CSS 样式化与选定的单选按钮和已勾选的复选框关联的标签？
要使用 CSS 为与选定的单选按钮和已勾选的复选框关联的标签设置样式，这是 表单 中的一项重要任务，因为它使识别用户选择的选项变得更容易。在本文中，我们将了解如何使用 :checked 伪类选择器和 CSS 组合器 使用 CSS 为与选定的单选按钮和已勾选的复选框关联的标签设置样式。
我们有三个单选按钮和三个复选框，我们的任务是使用 CSS 为与选定的单选按钮和已勾选的复选框关联的标签设置样式。
设置已勾选单选按钮和复选框的标签样式
- 我们使用 input 标签和 type 属性（设置为 radio）创建了三个单选按钮，并使用 type 属性（设置为 checkbox）创建了三个复选框。
- 然后，我们使用 label 标签为每个单选按钮和复选框创建了标签。
- 我们使用了 **"input[type="radio"]:checked"**，它选择所有已勾选的单选按钮。
- 之后，我们将 **"+label"** 与上一步一起使用，它选择相应已勾选单选按钮的标签。
- 类似地，我们使用了 **"input[type="checkbox"]:checked+label"**，它选择相应已勾选复选框的标签。
- 最后，我们使用了 CSS background-color、color 和 font-weight 属性，它们将标签的背景设置为绿色，文本颜色设置为白色且加粗。
示例 1
这是一个完整的示例代码，它实现了上述步骤，以使用 CSS 为与选定的单选按钮和已勾选的复选框关联的标签设置样式。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
To style label associated with selected
radio input and checked checkboxes using
CSS
</title>
<style>
.radio_button input[type="radio"]:checked+label,
input[type="checkbox"]:checked+label {
background-color: #04af2f;
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<h3>
To style label associated with selected
radio input and checked checkboxes using
CSS
</h3>
<p>
In this example we have used <strong>checked
</strong> psuedo-class selector to style label
for checked radio and checkboxes using CSS.
</p>
<div class="radio_button">
<input type="radio" id="option1" name="options" />
<label for="option1">Option 1</label>
<br>
<input type="radio" id="option2" name="options" />
<label for="option2">Option 2</label>
<br>
<input type="radio" id="option3" name="options" />
<label for="option3">Option 3</label>
<br>
<input type="checkbox" id="option4" name="options" />
<label for="option4">Option 4</label>
<br>
<input type="checkbox" id="option5" name="options" />
<label for="option5">Option 5</label>
<br>
<input type="checkbox" id="option6" name="options" />
<label for="option6">Option 6</label>
</div>
</body>
</html>
示例 2
此示例仅设置您想要设置样式的已勾选单选按钮和复选框标签的样式。为此，我们使用了 **普通同胞组合器 (~)**。此处样式仅应用于 **选项 1** 和 **选项 5** 的标签。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
To style label associated with selected
radio input and checked checkboxes using
CSS
</title>
<style>
.radio_button input[type="radio"]:checked
~label[for="option1"],
input[type="checkbox"]:checked~
label[for="option5"] {
background-color: #04af2f;
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<h3>
To style label associated with selected
radio input and checked checkboxes using
CSS
</h3>
<p>
In this example we have used <strong>checked
</strong> psuedo-class selector with sibling
combinator(~) to style label for selected radio
and checkboxes using CSS. Here <strong>option 1</strong>
and <strong>option 5</strong> will have change in style.
</p>
<div class="radio_button">
<input type="radio" id="option1" name="options"/>
<label for="option1">Option 1</label>
<br>
<input type="radio" id="option2" name="options"/>
<label for="option2">Option 2</label>
<br>
<input type="radio" id="option3" name="options"/>
<label for="option3">Option 3</label>
<br>
<input type="checkbox" id="option4" name="options"/>
<label for="option4">Option 4</label>
<br>
<input type="checkbox" id="option5" name="options"/>
<label for="option5">Option 5</label>
<br>
<input type="checkbox" id="option6" name="options"/>
<label for="option6">Option 6</label>
</div>
</body>
</html>
结论
在本文中，我们了解了如何在 CSS 的帮助下，使用 CSS **:checked** 伪类选择器和 CSS **组合器** 为与选定的单选按钮和已勾选的复选框关联的标签设置样式。
更新于：2024年8月21日
3K+ 次浏览
广告