Tony Tony - 3 months ago 31
CSS Question

label input type radio

I am trying to css the input type radio button, and it does not work. The problem is that the input tag is inside the label tag and I am not able to change it.



input{
display:none;
}


label:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 10px;
bottom: 1px;
background-color: #aaa;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);

}
input[type=radio]:checked + label:before {
content: "\2022";
color: #f3f3f3;
font-size: 30px;
text-align: center;
line-height: 18px;
}

<label for="female"><input id="female" type="radio" name="gender" value="female">Female</label>




Answer

You have to have an inner substitute for your input because the + only selects the next element on the same level.

input{
  display:none;
}


span:before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    bottom: 1px;
    background-color: #aaa;
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);

}
input[type=radio]:checked + span:before {
    content: "\2022";
    color: #f3f3f3;
    font-size: 30px;
    text-align: center;
    line-height: 18px;
}
<label for="female">
  <input id="female" type="radio" name="gender" value="female">
  <span for="female"></span>
  Female
</label