0

i have radio buttons styled appear as regular buttons. i made it so once you click on the first button, the second button drops its opacity. the problem i am having is that once you click the second button, the first button does not change opacity. i had accomplished this with jquery but wanted to do it in css instead.

heres an example: 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);
}
Jonas
  • 121,568
  • 97
  • 310
  • 388
sirweatha
  • 27
  • 1
  • 5
  • You cannot affect previous elements in the DOM. You may have to re-think your structure to achieve this but JS/JQ would be the optimal method if you have a great many elements. – Paulie_D May 22 '15 at 09:45

1 Answers1

1

Try this demo

#radio01 + label {
    background: rgba(26, 188, 156, 0.25);
}
stanze
  • 2,456
  • 10
  • 13