jquery - 当 :checked 时，使用单选按钮输入上的 CSS 更改背景颜色

Question

问题

尝试更改样式类似于按钮的单选输入的背景颜色，以便当用户单击它时，颜色将从灰色变为黄色。

代码片段

 /*----------------------------------
        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>

Answer 1

有两种方法可以解决这个问题。一种是纯 CSS 解决方案。如果您可以控制 HTML 结构，那么您应该这样做:

解决方案 1:CSS 解决方案

只需修改您的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>

保持相同的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;
}

您可以在这里看到 -> http://jsfiddle.net/4pf9cds3/

<小时/>

解决方案 2:jQuery 解决方案

如果您无法控制 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:

$(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;
}

您可以在这里看到 -> http://jsfiddle.net/rmd1fa1x/

希望这有帮助!!!