在单选按钮输入时使用CSS更改背景颜色:选中 [英] Changing background color with CSS on radio button input when :checked
问题描述
问题
尝试更改已设置为按钮样式的收音机输入的背景颜色,以便在用户点击它时,颜色将从灰色到黄色。
代码段
/ * ------- ---------------------------侧杆---------------------- ------------ * / input [type = radio],input [type = checkbox] {display:none; } form input [type =radio]:checked + label {background-color:yellow; } label {display:block;外观:按钮; -webkit外观:按钮; -moz-appearance:button; -ms-appearance:button; font-family:'Roboto',sans-serif; font-weight:400;背景:#DDDDDD; font-size:1.6rem;颜色:#111111; border:2px solid #AAAAAA; padding:8px;宽度:40%; margin:0 auto; text-align:center; & ;: hover {cursor:pointer; }& ;: checked {background-color:$ yellow; }}
< form& < label for => < input type =radioclass =buttonid =Malename =gender>男性< / input> < / label> < label for => < input type =radioclass =buttonid =Femalename =gender>女< / input> < / label>< / form>
有两种方法可以解决这个问题。一个是 CSS
解决方案。如果您可以控制 HTML
结构,您应该这样做:
解决方案1:CSS解决方案
只需修改 HTML ,如下所示:
< form>
< input type =radioclass =buttonid =Malename =gender>< / input&
< label for =Male>男性< / label>
< input type =radioclass =buttonid =Femalename =gender>< / input&
< label for =女性>女性< / label>
< / form>
保持 CSS :
/ * --------------------------------- -
SIDEBAR
---------------------------------- * /
input [type = radio],
input [type = checkbox] {
display:none;
}
表单输入[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;
}
您可以在这里看到 - > http://jsfiddle.net/4pf9cds3/
解决方案2:jQuery解决方案
如果您无法控制HTML,则可以使用此解决方案,假设您的HTML由第三方提供我怀疑是这种情况):
HTML:
< form>
< label for =Male>
< input type =radioclass =buttonid =Malename =gender>男性< / input>
< / label>
< label for =Female>
< input type =radioclass =buttonid =Femalename =gender>女性< / input&
< / label>
< / form>
jQuery :
$(document).ready(function(){
$('label')。 .removeClass('yellowBackground');
$(this).addClass('yellowBackground');
});
});
CSS:
/ * ----------------------------------
SIDEBAR
---------------------------------- * /
输入[类型= radio],input [type = checkbox] {
display:none;
}
标签{
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;
}
您可以在这里看到 - > http://jsfiddle.net/rmd1fa1x/
希望这有助于!!!
p>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>
解决方案There are two ways you can go about this. One would be a pure
CSS
solution. You should go for this if you have control over theHTML
structure :SOLUTION 1 :CSS Solution
Just modify your HTML as follows :
<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 :
/*---------------------------------- 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/
SOLUTION 2 : jQuery Solution
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 :
<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 :
$(document).ready(function() { $('label').click(function() { $('label').removeClass('yellowBackground'); $(this).addClass('yellowBackground'); }); });
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/
Hope this helps!!!
这篇关于在单选按钮输入时使用CSS更改背景颜色:选中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!