html - 单击 HTML/CSS 时,单选按钮不会更改背景颜色
问题描述
当我单击另一个单选按钮时,我想将单选按钮的背景颜色更改为橙色,因为它会将颜色从白色变为橙色
代码片段:
<!DOCTYPE html>
<html>
<head>
<style>
input [type="radio"]:checked,
input [type="radio"]:not(:checked) {
position: absolute;
left: -9999px;
}
input [type="radio"]:checked + label,
input [type="radio"]:not(:checked) + label {
position: relative;
padding-left: 28px;
cursor: pointer;
line-height: 20px;
display: inline-block;
color: #666;
}
input [type="radio"]:checked + label:before,
input [type="radio"]:not(:checked) + label:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 18px;
height: 18px;
border: 1px solid #ddd;
border-radius: 100%;
background: white;
}
input [type="radio"]:checked + label:after,
input [type="radio"]:not(:checked) + label:after {
content: '';
width: 12px;
height: 12px;
background: orange;
position: absolute;
top: 4px;
left: 4px;
border-radius: 100%;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
input [type="radio"]:not(:checked) + label:after {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
input [type="radio"]:checked + label:after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
</style>
</head>
<body>
<div class="radio-1">
<input type="radio" class="radio-buttons" id="male" name="gender" value="male">
<label name="gender">Male</label>
</div>
<div class="radio-2">
<input type="radio" class="radio-buttons" id="female" name="gender" value="female">
<label name="gender">Female</label>
</div>
</body>
</html>
代码没有按预期工作。
请告诉我如何改进此代码以更改单选按钮背景颜色。
任何帮助都会很棒!谢谢!
解决方案
您需要在 css 选择器中输入后删除空格,以便浏览器可以在 dom 中选择正确的元素,还需要为各个单选按钮的标签添加 for="" 属性,这样当您单击标签时,它会更改相应的单选按钮,其余的代码都是完美的!
<!DOCTYPE html>
<html>
<head>
<style>
input[type="radio"]:checked,
input[type="radio"]:not(:checked) {
position: absolute;
left: -9999px;
}
input[type="radio"]:checked + label,
input[type="radio"]:not(:checked) + label {
position: relative;
padding-left: 28px;
cursor: pointer;
line-height: 20px;
display: inline-block;
color: #666;
}
input[type="radio"]:checked + label:before,
input[type="radio"]:not(:checked) + label:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 18px;
height: 18px;
border: 1px solid #ddd;
border-radius: 100%;
background: white;
}
input[type="radio"]:checked + label:after,
input[type="radio"]:not(:checked) + label:after {
content: '';
width: 12px;
height: 12px;
background: orange;
position: absolute;
top: 4px;
left: 4px;
border-radius: 100%;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
input[type="radio"]:not(:checked) + label:after {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
input[type="radio"]:checked + label:after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
</style>
</head>
<body>
<div class="radio-1">
<input type="radio" class="radio-buttons" id="male" name="gender" value="male">
<label name="gender" for="male">Male</label>
</div>
<div class="radio-2">
<input type="radio" class="radio-buttons" id="female" name="gender" value="female">
<label name="gender" for="female">Female</label>
</div>
</body>
</html>
推荐阅读
- google-app-maker - 在 App Maker 中最大化多个用户之间的页面值同步?
- python - keras 重置模型或重置 tensorflow 图
- python - 如何在 Python 中创建评分系统?
- perl - 这是一种有效的插入排序形式吗?
- python-3.x - H2OConnectionError: 意外的 HTTP 错误: HTTPConnectionPool(host='localhost', port=54321):
- java - 如何在没有任何主类的情况下在 netbeans IDE 中运行 Java 小程序
- php - 通过php将数据保存到postgres
- c++ - cpp项目中.fdf和.h文件的区别
- java - 防止在 webView 中使用键盘
- python - 蟒蛇 | 合并一个文件夹中的多个 csv (100+) 文件,并考虑 csv 标头