在单选按钮输入时使用CSS更改背景颜色:选中 [英] Changing background color with CSS on radio button input when :checked

查看:274
本文介绍了在单选按钮输入时使用CSS更改背景颜色:选中的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

问题



尝试更改已设置为按钮样式的收音机输入的背景颜色,以便在用户点击它时,颜色将从灰色到黄色。



代码段



  / * ------- ---------------------------侧杆---------------------- ------------ * / 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 the HTML 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屋!

登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆