jQuery 使用 CSS 在单选按钮输入时更改背景颜色：选中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28554707/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing background color with CSS on radio button input when :checked
提问by Andrew Nguyen
Problem
问题
Trying to change the background color of a radio input that's been styled like a button so that when the user clicks on it, the color will change from grey to yellow.
尝试更改样式为按钮的单选输入的背景颜色，以便当用户单击它时，颜色将从灰色变为黄色。
Code snippet
代码片段
/*----------------------------------
SIDEBAR
----------------------------------*/
input[type=radio],
input[type=checkbox] {
display: none;
}
form input[type="radio"]:checked + label {
background-color: yellow;
}
label {
display: block;
appearance: button;
-webkit-appearance: button;
-moz-appearance: button;
-ms-appearance: button;
font-family: 'Roboto', sans-serif;
font-weight: 400;
background: #DDDDDD;
font-size: 1.6rem;
color: #111111;
border: 2px solid #AAAAAA;
padding: 8px;
width: 40%;
margin: 0 auto;
text-align: center;
&: hover {
cursor: pointer;
}
&: checked {
background-color: $yellow;
}
}<form>
<label for="">
<input type="radio" class="button" id="Male" name="gender">Male</input>
</label>
<label for="">
<input type="radio" class="button" id="Female" name="gender">Female</input>
</label>
</form>回答by Satwik Nadkarny
There are two ways you can go about this. One would be a pure CSSsolution. You should go for this if you have control over the HTMLstructure :
有两种方法可以解决这个问题。一个是纯粹的CSS解决方案。如果您可以控制HTML结构，则应该这样做：
SOLUTION 1 :CSS Solution
解决方案1：CSS解决方案
Just modify your HTMLas follows :
只需按如下方式修改您的HTML：
<form>
<input type="radio" class="button" id="Male" name="gender"></input>
<label for="Male">Male</label>
<input type="radio" class="button" id="Female" name="gender"></input>
<label for="Female">Female</label>
</form>
Keeping the same CSS:
保持相同的CSS：
/*----------------------------------
SIDEBAR
----------------------------------*/
input[type=radio],
input[type=checkbox] {
display: none;
}
form input[type="radio"]:checked + label {
background-color: yellow;
}
label {
display: block;
appearance: button;
-webkit-appearance: button;
-moz-appearance: button;
-ms-appearance: button;
font-family: 'Roboto', sans-serif;
font-weight: 400;
background: #DDDDDD;
font-size: 1.6rem;
color: #111111;
border: 2px solid #AAAAAA;
padding: 8px;
width: 40%;
margin: 0 auto;
text-align: center;
}
You can see this here -> http://jsfiddle.net/4pf9cds3/
你可以在这里看到这个 - > http://jsfiddle.net/4pf9cds3/
SOLUTION 2 : jQuery Solution
解决方案 2：jQuery 解决方案
You can use this solution if you have no control over the HTML, say your HTML is being provided by a third-party (though I doubt this is the case) :
如果您无法控制 HTML，则可以使用此解决方案，例如您的 HTML 是由第三方提供的（尽管我怀疑是这种情况）：
HTML :
HTML :
<form>
<label for="Male">
<input type="radio" class="button" id="Male" name="gender" >Male</input>
</label>
<label for="Female">
<input type="radio" class="button" id="Female" name="gender">Female</input>
</label>
</form>
jQuery :
jQuery ：
$(document).ready(function() {
$('label').click(function() {
$('label').removeClass('yellowBackground');
$(this).addClass('yellowBackground');
});
});
CSS :
CSS :
/*----------------------------------
SIDEBAR
----------------------------------*/
input[type=radio], input[type=checkbox] {
display: none;
}
label {
display: block;
appearance: button;
-webkit-appearance: button;
-moz-appearance: button;
-ms-appearance: button;
font-family:'Roboto', sans-serif;
font-weight: 400;
background: #DDDDDD;
font-size: 1.6rem;
color: #111111;
border: 2px solid #AAAAAA;
padding: 8px;
width: 40%;
margin: 0 auto;
text-align: center;
transition: all 0.7s ease-in-out;
}
.yellowBackground {
background-color:yellow;
}
You can see this here -> http://jsfiddle.net/rmd1fa1x/
你可以在这里看到这个 - > http://jsfiddle.net/rmd1fa1x/
Hope this helps!!!
希望这可以帮助！！！
回答by Ashish Saxena
$(document).ready(function(){
$("input:radio").click(function(){
if ($(this).is(":checked")){
$("label").css({"color":"green","background-color":"#6600cc"}) && $(this).closest("label").css({"color":"green","background-color":"orange"});
}
});
});input[type=radio],
input[type=checkbox] {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<label for="Male">
<input type="radio" class="button" id="Male" name="gender">
</label>
<label for="Female">
<input type="radio" class="button" id="Female" name="gender">
</label>
</form>回答by Azadey
Checkbox dont have a background colour. What you can do is wrap the checkbox with a div that has a colour.
复选框没有背景颜色。您可以做的是用具有颜色的 div 包裹复选框。
<div class='yellow' >
<input type="radio" class="button" id="Male" name="gender">Male</input>
</div>
回答by Azadey
In jquery you can set onclick of button background is set to yellow or a {color: red}
在 jquery 中，您可以设置 onclick 的按钮背景设置为黄色或 {color: red}
a:active {color: blue}
a：活动{颜色：蓝色}
回答by John S
The +selector is the "next sibling" relationship selector. So the following selector applies to <label>elements that are the next siblings of checked radio button elements, but in your html the <label>elements are parents of the radio button elements.
该+选择是“下一个兄弟”关系选择。因此，以下选择器适用于<label>作为选中单选按钮元素的下一个兄弟元素的元素，但在您的 html 中，这些<label>元素是单选按钮元素的父元素。
form input[type="radio"]:checked + label {
background-color: yellow;
}
Your CSS will work if you change your html so the <label>elements are the next siblings of the radio button elements.
如果您更改 html，您的 CSS 将起作用，因此这些<label>元素是单选按钮元素的下一个兄弟元素。
<form>
<input type="radio" class="button" id="Male" name="gender"/>
<label for="Male">Male</label>
<input type="radio" class="button" id="Female" name="gender"/>
<label for="Female">Female</label>
</form>
回答by Harika Y
Using jQuery you can do the following —
使用 jQuery，您可以执行以下操作 —
HTML:
HTML：
<div id=“gen”>
<input type="radio" class=“button" id="Male" name="gender"> <label for=“Male”>Male </label>
<input type="radio" class=“button" id="Female" name="gender"><label for=“Female”>Female</label>
</div>
Add this CSS to yours:
将此 CSS 添加到您的：
.yellow{
background: yellow;
}
JS:
JS：
$(document).ready(function(){
$("input[name=gender]").click(function() {
$(“#gen > label").addClass('yellow');
}
});
});
