Faire bouton radio plus grand?

Essayez ce code:

input[type='radio'] { transform: scale(2); }

vous pouvez facilement définir sa hauteur et sa largeur comme avec n'importe quel élément.

Voici le violon avec le code

JSFIDDLE BIG RADIO BUTTON

HTML

<input id="r1" type="radio" name="group1" class="radio1" />
<label for="r1">label 1 text</label>
<input id="r2" type="radio" name="group1" class="radio2" />
<label for="r2">label 2 text</label>
<input id="r3" type="radio" name="group1" class="radio3" />
<label for="r3">label 3 text</label>
<input id="r4" type="radio" name="group1" class="radio4" />
<label for="r4">label 4 text</label>

CSS

input[type=radio] {
    display: none;
}
input[type=radio] + label::before {
    content: '';
    display: inline-block;
    border: 1px solid #000;
    border-radius: 50%;
    margin: 0 0.5em;
}
input[type=radio]:checked + label::before {
    background-color: #ffa;
}

.radio1 + label::before {
    width: 0.5em;
    height: 0.5em;
}

.radio2 + label::before {
    width: 0.75em;
    height: 0.75em;
}

.radio3 + label::before {
    width: 1em;
    height: 1em;
}

.radio4 + label::before {
    width: 1.5em;
    height: 1.5em;
}

le style du bouton radio n'est pas facile.

les éléments de forme en général sont soit problématiques soit impossibles à styliser en utilisant CSS alone.

il suffit de passer par ce lien pour votre propre style avec une plus grande taille pour les boutons radio..

regardez Aussi ce lien...

plus gros boutons radio

vous pouvez le faire en utilisant CSS mais le navigateur et le système d'exploitation ont aussi un impact sur cela. Regardez la suite de l'article.

Style de boutons radio avec les CSS

essaye ceci:

HTML

<label>
   <input type="radio" value="1">
   <div></div>
</label>

CSS

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

input[type="radio"] + div {
   height: 20px;
   width: 20px;
   display: inline-block;
   cursor: pointer;
   vertical-align: middle;
   background: #FFF;
   border: 1px solid #d2d2d2;
   border-radius: 100%;
}

input[type="radio"] + div:hover {
    border-color: #c2c2c2;
}

input[type="radio"]:checked + div {
    background:gray;
}

DÉMO: http://jsfiddle.net/nuzhysgg/

Il pourrait y avoir quelques excentriques <span> astuces à l'intérieur des éléments radio mais j'imagine que les utiliser sur différents navigateurs serait ennuyeux à déboguer.

j'ai utilisé ce script dans le passé, mais pas récemment.