【问题标题】:Label background if radio is checked如果选中收音机,则标记背景
【发布时间】:2015-10-21 16:24:42
【问题描述】:

如果选中单选按钮,我想给我的上部标签一个背景。 我不想给 span 一个背景,因为背景需要包含单选按钮。

<label>
   <input type="radio" checked="checked">
   <span>text</span>
</label>

在这里查看我的完整代码:https://jsfiddle.net/kL2h46x5/

我该如何解决这个问题?

【问题讨论】:

    标签: css radio-button


    【解决方案1】:

    无法选择输入元素的父元素。但是您可以重新排列标记以达到预期的效果:

    HTML:

    <input class="radio-gender bestelling-type" type="radio" checked="checked" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck">
    <label class="type-bestelling" for="noCheck">
        <span class="type-bestelling-particulier">Particulier</span>
    </label>
    
    <input class="radio-gender bestelling-type" type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck">
    <label class="type-bestelling" for="yesCheck">
        <span class="type-bestelling-zakelijk">Zakelijk</span>
    </label>
    

    CSS:

    label.type-bestelling {background-color: #f1f1f1; margin-right:10px;}
    
    input:checked+label {
        background:red;
    }
    

    https://jsfiddle.net/kL2h46x5/9/

    【讨论】:

      【解决方案2】:

      https://jsfiddle.net/kL2h46x5/6/

      使用

       :checked + span {
            background-color: #f10;
       }
      

      【讨论】:

      • 谢谢,但我想要一个完整的背景。还包括单选按钮。这就是为什么我想给标签一个背景。
      • 啊,你写了标签,所以我假设了跨度。请一秒钟。
      • jsfiddle.net/kL2h46x5/8 我无法更改背景颜色,抱歉。如果可能的话,其他人将不得不提供帮助。
      猜你喜欢
      • 2021-08-27
      • 2012-11-13
      • 1970-01-01
      • 1970-01-01
      • 2013-02-07
      • 1970-01-01
      • 2013-04-26
      • 2012-08-11
      • 2019-04-22
      相关资源
      最近更新 更多