在HTML中，单选框（radio button）是一种表单元素，用于让用户从一组选项中选择一个，默认情况下，单选框的样式是一个圆圈，当用户点击它时，圆圈中间会出现一个对勾，有时候我们可能需要自定义单选框的样式，例如将单选框变成打勾的样子，本文将介绍如何使用CSS来实现这个效果。
1. 使用CSS伪类选择器
我们可以使用CSS的：checked伪类选择器来改变选中状态的单选框样式，当单选框被选中时，它的标签会有一个"checked"属性，我们可以通过这个属性来改变单选框的样式。
我们需要创建一个HTML文件，包含一个单选框：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义单选框样式</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form>
<input type="radio" id="option1" name="option" class="custom-radio">
<label for="option1">选项1</label>
</form>
</body>
</html>
接下来，我们需要创建一个CSS文件（styles.css），并添加以下代码：
.custom-radio {
appearance: none;
width: 20px;
height: 20px;
border: 1px solid 999;
border-radius: 50%;
outline: none;
background-color: fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
transition: background-color 0.3s;
}
.custom-radio:checked {
background-color: 4caf50;
}
在这个例子中，我们首先将单选框的appearance属性设置为none，这样浏览器就不会为单选框添加默认的样式，我们设置单选框的宽度、高度、边框等样式，我们使用：checked伪类选择器来改变选中状态的单选框样式，当单选框被选中时，它的背景颜色会变成绿色。
2. 使用JavaScript实现动态样式变化
除了使用CSS伪类选择器之外，我们还可以使用JavaScript来实现动态样式变化，当用户点击单选框时，我们可以使用JavaScript来改变单选框的样式。
我们需要修改HTML文件，为单选框添加一个onclick事件监听器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义单选框样式</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form>
<input type="radio" id="option1" name="option" class="custom-radio" onclick="changeStyle()">
<label for="option1">选项1</label>
</form>
<script src="scripts.js"></script>
</body>
</html>
接下来，我们需要创建一个JavaScript文件（scripts.js），并添加以下代码：
function changeStyle() {
var radio = document.getElementById("option1");
if (radio.checked) {
radio.style.backgroundColor = "4caf50";
} else {
radio.style.backgroundColor = "fff";
}
}
在这个例子中，我们首先获取到单选框元素，我们检查单选框是否被选中，如果被选中，我们将单选框的背景颜色设置为绿色；否则，我们将单选框的背景颜色设置为白色，这样，当用户点击单选框时，它的背景颜色会发生变化。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/200953.html
微信扫一扫 