html – How to fix a radio button?

Question:

I have no revert to the original radio style when others are selected, everything stays in style like: checked

.slider__buttons input[type="radio"] {
    display: none;
}

.slider__buttons label {
    background-color: #00aeef;
    margin-right: 30px;
    width: 25px;
    height: 25px;
    cursor: pointer;
    float: left;
}

.slider__buttons input[type="radio"]:checked + label {
    background-color: #fff;
    border: 2px solid #d30054;
}
<div class="slider__buttons marginfix">
    <input type="radio" id="radio1" checked>
    <label for="radio1"></label>
    <input type="radio" id="radio2">
    <label for="radio2"></label>
    <input type="radio" id="radio3">
    <label for="radio3"></label>
    <input type="radio" id="radio4">
    <label for="radio4"></label>
</div>

Answer:

.slider__buttons input[type="radio"] {
    display: none;
}

.slider__buttons label {
    background-color: #00aeef;
    margin-right: 30px;
    width: 25px;
    height: 25px;
    cursor: pointer;
    float: left;
}

.slider__buttons input[type="radio"]:checked + label {
    background-color: #fff;
    border: 2px solid #d30054;
}
<div class="slider__buttons marginfix">
    <input type="radio" id="radio1" name="rb" checked>
    <label for="radio1"></label>
    <input type="radio" id="radio2" name="rb">
    <label for="radio2"></label>
    <input type="radio" id="radio3" name="rb">
    <label for="radio3"></label>
    <input type="radio" id="radio4" name="rb">
    <label for="radio4"></label>
</div>
Scroll to Top