Question

我目前正在单选按钮上工作，我想在选中单选按钮时更改背景

.input:checked + label {
    transition: .5s;
    background: #3498db !important;
    color: white !important;

}

我确实是这样做的，但是另一个单选按钮将具有背景。我只想将背景添加到特定的类中。

我也尝试过

.radio-button-popup input:checked + label {
    transition: .5s;
    background: #3498db !important;
    color: white !important;

}

但是没有用。这就是我的单选按钮的结构。

<div class="input-group-radio">
    <input type="radio" style="display:none;" name="option-radio-test" class="radio-button-popup" value="test" id="test1">
    <label style=" font-weight: normal !important; padding: 2% !important; border-radius: 5px;" for="test1" class=" input-group-label">Test Radio</label>
</div>

我只希望单选按钮的“ radio-button-popup”类中的这组特定的单选按钮的背景。

Answer 1

您快到了。您唯一的错误是在已经选择输入之后使用input选择器。

.radio-button-popup:checked + label {
    transition: .5s;
    background: #3498db !important;
    color: white !important;

}

<div class="input-group-radio">
    <input type="radio" style="display:none;" name="option-radio-test" class="radio-button-popup" value="test" id="test1">
    <label style=" font-weight: normal !important; padding: 2% !important; border-radius: 5px;" for="test1" class=" input-group-label">Test Radio</label>
</div>

输入：仅在特定班级选中

1 个答案: