Question

我的收音机按钮样式显示为常规按钮。我做到了这一点，一旦你点击第一个按钮，第二个按钮就会降低其不透明度。我遇到的问题是，一旦你点击第二个按钮，第一个按钮不会改变不透明度。我用jquery完成了这个，但是想用css来做。

HTML：

<input type="radio" id="radio01" name="konnect" value="yes"><label for="radio01"><span></span>yes</label>
<input type="radio" id="radio02" name="konnect" value="no"><label for="radio02"><span></span>no</label><br>

的CSS：

input[type=radio] {
    display: none;
}
input[type=radio] + label {
    cursor: pointer;
    float: left;
    padding: 5px 0;
    font-size: 18px;
    color: #ffffff;
    text-align: center;
    width: 50%;
    height: auto;
    margin-bottom: 10px;
    vertical-align: middle;
}
/* yes */
#radio01 + label {
    background: rgb(46, 204, 113);
}
#radio01 + label:hover {
    background: rgba(46, 204, 113, 0.75);
}
#radio01:checked + label {
    background: rgb(39, 174, 96);
}
#radio01:checked ~ label[for="radio02"] {
    background: rgba(26, 188, 156, 0.25);
}
/* no */
#radio02 + label {
    background: rgb(26, 188, 156);
}
#radio02 + label:hover {
    background: rgba(26, 188, 156, 0.75);
}
#radio02:checked ~ label[for="radio01"] {
    background: rgba(46, 204, 113, 0.25);
}
#radio02:checked + label {
    background: rgb(22, 160, 133);
}

Answer 1

试试这个demo

#radio01 + label {
    background: rgba(26, 188, 156, 0.25);
}

css单选按钮切换背景

1 个答案: