web-dev-qa-db-fra.com

Rendre le bouton radio plus gros?

Est-il possible de faire un bouton radio plus gros en utilisant CSS?

Sinon, comment puis-je le faire?

htmlcssbuttonradio-button
33
Latox

voir ce lien peut être son aide vous

http://www.thecssninja.com/css/custom-inputs-using-css

6
Bhanu Prakash Pandey

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 bouton radio de style n'est pas facile. 

Les éléments de formulaire en général sont problématiques ou impossibles à styliser avec 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

12
KesaVan

Vous pouvez le faire en utilisant CSS, mais le navigateur et le système d'exploitation ont également un impact sur cela. Regardez l'article suivant.

Styling boutons radio avec CSS

2
Naveed

Essaye ç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/

1
Cas Bloem

Il peut y avoir quelques astuces excentriques de <span> à l’intérieur des éléments radio, mais j’imagine que les utiliser avec différents navigateurs serait gênant pour le débogage.

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

0
Cole