单击 HTML/CSS 时，单选按钮不会更改背景颜色
[英]Radio button does not change background color when on click HTML/CSS
问题描述
I want to change background color of radio button by orange when I click on another radio button it changes color from white to orange as this
当我单击另一个单选按钮时，我想将单选按钮的背景颜色更改为橙色，因为它会将颜色从白色变为橙色
Code Snippet:代码片段：
<: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>
The code does not working as expected.代码没有按预期工作。
please tell me how can I improve this code so that change the radio button background color.请告诉我如何改进此代码以更改单选按钮背景颜色。
Any help will be awesome!任何帮助都会很棒！ Thanks!谢谢！
2 个解决方案
解决方案1
3 2020-06-07 08:41:07
You need to remove the spaces after input in css selectors so that browser can select the right element in the dom, also you need to add for="" attribute to your labels for respective radio buttons so when you click on labels then it changes the respective radio button also, rest of you code is perfect !您需要在 css 选择器中输入后删除空格，以便浏览器可以 select dom 中的正确元素，还需要为相应单选按钮的标签添加 for="" 属性，因此当您单击标签时，它会更改相应的单选按钮，rest 你的代码是完美的！
<: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>
解决方案2
1 已采纳
There are two small issues in the code you posted.您发布的代码中有两个小问题。 Fixing those should make the buttons work as you intended:修复这些应该使按钮按预期工作：
- In the CSS, you have spaces between
inputand[type="radio"], where you want to make itinput[type="radio"]instead (so without a space inbetween).在 CSS 中，您在input和[type="radio"]之间有空格，而您希望将其设为input[type="radio"]（因此中间没有空格）。 - In the HTML, there must be a
forattribute on the label, which links to theidof the accompanying input.在 HTML 中，label 上必须有一个for属性，该属性链接到随附输入的id。 Sofor="male"on one label, andfor="female"on the other.因此，一个 label 上的for="male"和另一个上的for="female"。 Otherwise a click on the label will not trigger a click on the hidden input.否则点击 label 将不会触发点击隐藏输入。
I hope that helps!我希望这会有所帮助！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.