Home > Article > Web Front-end > Use the :checked pseudo-class selector to change the style of a selected checkbox or radio button
Use the :checked pseudo-class selector to change the style of a selected checkbox or radio button
- 王林Original
- 2023-11-20 11:48:16994browse
Because the length of the article is limited, there are only short code examples. Here is an example:
Suppose we have the following HTML structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checked伪类选择器示例</title>
<style>
input[type="checkbox"]:checked + label {
font-weight: bold;
color: green;
}
</style>
</head>
<body>
<input type="checkbox" id="checkbox1">
<label for="checkbox1">选项1</label>
<input type="checkbox" id="checkbox2">
<label for="checkbox2">选项2</label>
</body>
</html>In the above example, input[type="checkbox"]:checked label is used Selector, when the check box is selected, the style of the adjacent label element will change, becoming bold and green.
The above is the detailed content of Use the :checked pseudo-class selector to change the style of a selected checkbox or radio button. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn