我想在单击另一个单选按钮时通过橙色将单选按钮的背景颜色更改为橙色,因为这是
代码段:
<!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>
该代码无法正常工作。
请告诉我如何改进此代码,以便更改单选按钮的背景色。
任何帮助都会很棒!谢谢!
您发布的代码中有两个小问题。修复这些问题后,按钮应可按预期工作:
input
和之间要有空格[type="radio"]
,而您要在其中进行input[type="radio"]
替换(因此之间不要有空格)。for
标签上必须有一个属性,该属性链接到id
附带输入的。因此,for="male"
在一个标签上,在另一个标签for="female"
上。否则,单击标签将不会触发对隐藏输入的单击。希望对您有所帮助!
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句