Custom Radio Buttons: How to uncheck? (Checkbox Hack) [duplicate]

Question

I created some custom checkboxes which work great:

I tried to do the same with radio buttons. But if one radio button is active and I click another one, the unchecking does not work:

➤ https://codepen.io/anon/pen/YQLdxd

Custom Radio Buttons CSS Code

.radio  {
    position: relative;
    margin-bottom: 10px;
}

.radio input[type="radio"] {
    cursor: pointer;
    height: 100%;
    left: 0;
    margin: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}

.radio label {margin-left: 32px;}

.radio label:before,
.radio label:after {
    content: "";
    display: block;
    position: absolute;
}

.radio label:before {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    height: 20px;
    left: 0;
    top: 4px;
    width: 20px;
}

.radio label:after {
    background: red;
    border-radius: 50%;
    height: 12px;
    left: 5px;
    opacity: 0;
    pointer-events: none;
    top: 9px;
    width: 12px;
}

.radio input:checked ~ label:after {opacity: 1;}

input[type="radio"]:checked + label:before {
    border: 1px solid red;
    box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 0 #fff, inset 0 0 0 16px #fff;
    color: #fff;
}

Custom Radio Buttons HTMLCode

<div class="radio">
    <input value="" type="radio">
    <label>Radio Button 1</label>
</div>
<div class="radio">
    <input value="" type="radio">
    <label>Radio Button 2</label>
</div>
<div class="radio">
    <input value="" type="radio">
    <label>Radio Button 3</label>
</div>
<div class="radio">
    <input value="" type="radio">
    <label>Radio Button 4</label>
</div>

Does anyone of the CSS Super Heros have an idea, why the radio buttons are not working?

you have to specify the name of the radios : name="radios", the same name for all the radio of the group — D. Peter
– D. Peter, Commented Jul 4, 2017 at 9:33

D. Peter · Accepted Answer · 2017-07-04 09:34:29Z

you have to specify the name of the radios : name="radios", the same name for all the radio of the group

.radio  {
    position: relative;
    margin-bottom: 10px;
}

.radio input[type="radio"] {
    cursor: pointer;
    height: 100%;
    left: 0;
    margin: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}

.radio label {margin-left: 32px;}

.radio label:before,
.radio label:after {
    content: "";
    display: block;
    position: absolute;
}

.radio label:before {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    height: 20px;
    left: 0;
    top: 4px;
    width: 20px;
}

.radio label:after {
    background: red;
    border-radius: 50%;
    height: 12px;
    left: 5px;
    opacity: 0;
    pointer-events: none;
    top: 9px;
    width: 12px;
}

.radio input:checked ~ label:after {opacity: 1;}


input[type="radio"]:checked + label:before {
    border: 1px solid red;
    box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 0 #fff, inset 0 0 0 16px #fff;
    color: #fff;
}

<div class="radio">
    <input value="" type="radio" name="radios">
    <label>Radio Button 1</label>
</div>
<div class="radio">
    <input value="" type="radio" name="radios">
    <label>Radio Button 2</label>
</div>
<div class="radio">
    <input value="" type="radio" name="radios">
    <label>Radio Button 3</label>
</div>
<div class="radio">
    <input value="" type="radio" name="radios">
    <label>Radio Button 4</label>
</div>

anujayk · Accepted Answer · 2017-07-04 09:37:23Z

1

Nothing wrong with your CSS. The only thing that you need to take care in case of radio is, radio buttons always works in group. So you have to give them name (name attribute)

<div class="radio">
    <input value="" type="radio" name="rb1">
    <label>Radio Button 1</label>
</div>
<div class="radio">
    <input value="" type="radio" name="rb1">
    <label>Radio Button 2</label>
</div>
<div class="radio">
    <input value="" type="radio" name="rb1">
    <label>Radio Button 3</label>
</div>
<div class="radio">
    <input value="" type="radio" name="rb1">
    <label>Radio Button 4</label>
</div>

answered Jul 4, 2017 at 9:37

anujayk

5948 silver badges32 bronze badges

Collectives™ on Stack Overflow

Custom Radio Buttons: How to uncheck? (Checkbox Hack) [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related