Styling af specifik radio button
Det er lykkedes mig at få stylet nogle radio buttons, men jeg vil gerne kunne target specifikke buttons baseret på name eller ID.Min HTML:
<input type="radio" value="roed" id="farve roed" name="attribute_farve">
<label for="farve roed" name="roed"></label>
<input type="radio" value="blaa" id="farve blaa" name="attribute_farve">
<label for="farve blaa" name="blaa"></label>
og min CSS:
input[type=radio] {
display:none;
}
input[type=radio] + label {
display:inline-block;
height:35px;
width:35px;
border-radius:50%;
-moz-box-shadow: inset 6px 6px 13px -8px #000;
-webkit-box-shadow: inset 6px 6px 13px -8px #000;
box-shadow: inset 6px 6px 13px -8px #000;
}
input[type=radio] + label.roed{
background-color:red;
}
input[type=radio] + label.blaa{
background-color:blue;
}
input[type=radio]:checked + label {
width:5px;
height:5px;
border: 15px solid #00FF00;
background-color:black;
-moz-box-shadow: inset 6px 6px 13px -8px #000;
-webkit-box-shadow: inset 6px 6px 13px -8px #000;
box-shadow: inset 6px 6px 13px -8px #000;
}
Hvorfor virker ladel.roed og label.blaa ikke? Hvad skal man bruge for at rulen virker?
Testside: http://webintas.dk/radiotest.html