CODEWITHSUNDEEP
htmlcss
Tony
Tony

Reputation: 136

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>

Upvotes: 0

Views: 375

Answers (3)

Peyman Mohamadpour
Peyman Mohamadpour

Reputation: 17944

.control{
    vertical-align: middle;
    display: inline-block;
}
input{
    margin-right: 10px;
}
input:before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: -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:before {
    content: "\2022";
    color: #f3f3f3;
    font-size: 30px;
    text-align: center;
    line-height: 18px;
}
<input id="female" class="control" type="radio" name="gender" value="female">
<label for="female" class="control">
Female</label>

Upvotes: 1

Manivannan
Manivannan

Reputation: 3254

Pls try to put your label after input:radio

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

Upvotes: 0

Rudi Urbanek
Rudi Urbanek

Reputation: 1943

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

Upvotes: 0

Related Questions