Agrandir le bouton radio ?

Question

Existe-t-il un moyen d'agrandir un bouton radio à l'aide de CSS ?

Si non, comment puis-je faire autrement ?

Answer 1

Essayez ce code :

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

Answer 2

Vous pouvez facilement définir sa hauteur et sa largeur comme pour tout autre élément.

Voici le bidule avec le code

JSFIDDLE GROS BOUTON RADIO

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 des boutons radio n'est pas facile.

En général, les éléments de forme sont soit problématiques, soit impossibles à styliser à l'aide des éléments suivants CSS alone .

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

Regardez aussi ce lien...

Des boutons radio plus grands

Answer 3

Vous pouvez le faire en utilisant les CSS mais le navigateur et le système d'exploitation ont également un impact sur ce point. Consultez l'article suivant.

Stylisation des boutons radio avec CSS

Answer 4

N'utilisez pas transform: scale(1.3) c'est vraiment horrible. Utilise juste ça :

input[type='radio'] {
  height: 15px;
  width: 15px;
  vertical-align: middle;
}

<input type="radio">Select this item

Answer 5

Essayez ça :

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;
}

DEMO : http://jsfiddle.net/nuzhysgg/