<分区>
<分区>
我的单选按钮样式显示为常规按钮。我做到了，一旦你点击第一个按钮，第二个按钮就会降低它的不透明度。我遇到的问题是，一旦您单击第二个按钮，第一个按钮就不会改变不透明度。我已经用 jquery 完成了这个，但想用 css 代替。
这是一个例子:http://jsfiddle.net/mahsj3qx/
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);
}
最佳答案
试试这个 demo
#radio01 + label {
background: rgba(26, 188, 156, 0.25);
}
关于html - css 单选按钮切换背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30392968/