Avatar billede pstidsen Novice
05. marts 2014 - 21:38 Der er 1 kommentar og
1 løsning

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
Avatar billede pstidsen Novice
06. marts 2014 - 14:18 #1
Det virker, hvis jeg targeter med ID i stedet for name.
Avatar billede pstidsen Novice
06. marts 2014 - 18:03 #2
Lukker.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester