在以下情况下通过单选按钮输入更改背景颜色：选中

Question

问题

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

代码段

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

你可以在这里看到 - ＆gt; 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;
}

你可以在这里看到 - ＆gt; http://jsfiddle.net/rmd1fa1x/

希望这有帮助!!!

Answer 2

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

Answer 3

复选框没有背景颜色。你可以做的是用一个有颜色的div包装复选框。

<div class='yellow' >
  <input type="radio" class="button" id="Male" name="gender">Male</input>
</div>

Answer 4

在jquery中你可以设置onclick按钮背景设置为黄色或 a {color：red}

a：有效{color：blue}

Answer 5

+选择器是“下一个兄弟”relationship selector。因此，以下选择器适用于作为已检查单选按钮元素的下一个兄弟节点的<label>元素，但在您的html中，<label>元素是单选按钮元素的父节点。

form input[type="radio"]:checked + label {
    background-color: yellow;
}

如果您更改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>

jsfiddle

Answer 6

使用jQuery，您可以执行以下操作 -

HTML：

thumbnail_filename = info['thumbnails'][-1]['filename'] KeyError: 'filename'

将此CSS添加到您的：

    ydl_opts = {
        'key':'IgnoreErrors',
        'format': 'bestaudio/best',
        'download_archive': self.songs_data,
        'outtmpl': '/'+download_path+'/'+'%(title)s.%(ext)s',
        'progress_hooks': [self.my_hook],
        'postprocessors': [{
            'key': 'FFmpegExtractAudio',
            'preferredcodec': 'mp3',
            'preferredquality': '192'},
            {'key': 'EmbedThumbnail'},]}

JS：

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