Comment changer la taille du bouton radio en utilisant CSS?

Existe-t-il un moyen de contrôler la taille du bouton radio dans CSS?

Oui, vous devriez pouvoir définir sa hauteur et sa largeur, comme pour n'importe quel élément. Cependant, certains navigateurs ne prennent pas vraiment en compte ces propriétés.

Cette démo donne un aperçu de ce qui est possible et de la manière dont il est affiché dans différents navigateurs: https://www.456bereastreet.com/lab/styling-form-controls-revisited/radio-button/

Comme vous le verrez, le style des boutons radio n'est pas facile :-D

Une solution de contournement consiste à utiliser JavaScript et CSS pour remplacer les boutons radio et autres éléments de formulaire par des images personnalisées:

• https://github.com/emblematiq/Niceforms
• https://web.archive.org/web/20161119112447/http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

Ce css semble faire l'affaire:

input[type=radio] {
    border: 0px;
    width: 100%;
    height: 2em;
}

La définition de la bordure à 0 semble permettre à l'utilisateur de modifier la taille du bouton et de demander au navigateur de le rendre dans cette taille, par exemple. la hauteur ci-dessus: 2em rendra le bouton à deux fois la hauteur de la ligne. Cela fonctionne également pour les cases à cocher ( input[type=checkbox]). Certains navigateurs rendent mieux que d'autres.

À partir d'une fenêtre Windows, il fonctionne dans IE8 +, FF21 +, Chrome29 +.

Ancienne question mais maintenant il existe une solution simple, compatible avec la plupart des navigateurs, qui est à utiliser CSS3. J'ai testé dans IE, Firefox et Chrome et cela fonctionne.

input[type="radio"] {
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
    transform: scale(1.5);
}

Modifiez la valeur 1.5, dans ce cas un incrément de 50% de taille, selon vos besoins. Si le ratio est très élevé, cela peut rendre le bouton radio flou. L'image suivante montre un rapport de 1,5.

Vous pouvez contrôler la taille du bouton radio avec le style css:

style = "hauteur: 35px; largeur: 35px;"

Cela contrôle directement la taille du bouton radio.

<input type="radio" name="radio" value="value" style="height:35px; width:35px; vertical-align: middle;">

Pas directement. En fait, les éléments de formulaire en général sont problématiques ou impossibles à styliser en utilisant uniquement CSS. la meilleure approche consiste à:

1. cachez le bouton radio en utilisant javascript.
2. Utilisez javascript pour ajouter / afficher du HTML qui peut être stylé comme vous le souhaitez, par exemple
3. Définissez des règles css pour un état sélectionné, qui est déclenché en ajoutant une classe «sélectionnée» à votre étendue.
4. Enfin, écrivez javascript pour que l'état du bouton radio réagisse aux clics sur la plage et, vice versa, pour que la plage réagisse aux changements d'état du bouton radio (lorsque les utilisateurs utilisent le clavier pour accéder au formulaire). la deuxième partie peut être difficile à mettre en œuvre sur tous les navigateurs. J'utilise quelque chose comme ce qui suit (qui utilise également jQuery. J'évite également d'ajouter des étendues supplémentaires en stylisant et en appliquant la classe "selected" directement aux étiquettes d'entrée).

javascript

var labels = $("ul.radioButtons).delegate("input", "keyup", function () { //keyboard use
        if (this.checked) {
            select($(this).parent());
        }
    }).find("label").bind("click", function (event) { //mouse use
        select($(this));
    });

function select(el) {
    labels.removeClass("selected");
    el.addClass("selected");
}

html

<ul class="radioButtons">
    <li>
        <label for="employee1">
            employee1
            <input type="radio" id="employee1" name="employee" />
        </label>
    </li>
    <li>
        <label for="employee2">
            employee1
            <input type="radio" id="employee2" name="employee" />
        </label>
    </li>
</ul>

Le redimensionnement du widget par défaut ne fonctionne pas dans tous les navigateurs, mais vous pouvez créer des boutons radio personnalisés avec JavaScript. L'un des moyens consiste à créer des boutons radio masqués, puis à placer vos propres images sur votre page. Cliquer sur ces images change les images (remplace l'image cliquée par une image avec un bouton radio dans un état sélectionné et remplace les autres images par des boutons radio dans un état non sélectionné) et sélectionne le nouveau bouton radio.

Quoi qu'il en soit, il existe de la documentation à ce sujet. Par exemple, lisez ceci: Styliser les cases à cocher et les boutons radio avec CSS et JavaScript .

Voici une approche. Par défaut, les boutons radio étaient environ deux fois plus grands que les étiquettes.
(Voir le code CSS et HTML en fin de réponse)

Safari: 10.0.3

Chrome: 56.0.2924.87

Firefox: 50.1.0

Internet Explorer: 9 (Le flou n'est pas la faute d'IE, test hébergé sur netrenderer.com)

CSS:

.sortOptions > label {
    font-size:          8px;
}

.sortOptions > input[type=radio] {
    width:              10px;
    height:             10px;
}

HTML:

<div class="rightColumn">Answers
    <span class="sortOptions">
        <input type="radio" name="answerSortList" value="credate"/>
        <label for="credate">Creation</label>

        <input type="radio" name="answerSortList" value="lastact"/>
        <label for="lastact">Activity</label>

        <input type="radio" name="answerSortList" value="score"/>
        <label for="score">Score</label>

        <input type="radio" name="answerSortList" value="upvotes"/>
        <label for="upvotes">Up votes</label>

        <input type="radio" name="answerSortList" value="downvotes"/>
        <label for="downvotes">Down Votes</label>

        <input type="radio" name="answerSortList" value="accepted"/>
        <label for="downvotes">Accepted</label>

    </span>
</div>                

Directement, vous ne pouvez pas faire cela. [Selon ma connaissance].

Vous devriez utiliser imagespour remplacer les boutons radio. Vous pouvez les faire fonctionner de la même manière que les boutons radio dans la plupart des cas, et vous pouvez les faire de la taille de votre choix.

Vous pouvez également utiliser la propriété transform, avec la valeur requise dans l'échelle:

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

Cela fonctionne bien pour moi dans tous les navigateurs:

(style en ligne pour plus de simplicité ...)

<label style="font-size:16px;">
    <input style="height:1em; width:1em;" type="radio">
    <span>Button One</span>
</label>

La taille du bouton radio et du texte changera avec la taille de la police de l'étiquette.

essayez ce code ... c'est peut-être le et ce que vous cherchez exactement

body, html{
  height: 100%;
  background: #222222;
}

.container{
  display: block;
  position: relative;
  margin: 40px auto;
  height: auto;
  width: 500px;
  padding: 20px;
}

h2 {
	color: #AAAAAA;
}

.container ul{
  list-style: none;
  margin: 0;
  padding: 0;
	overflow: auto;
}

ul li{
  color: #AAAAAA;
  display: block;
  position: relative;
  float: left;
  width: 100%;
  height: 100px;
	border-bottom: 1px solid #333;
}

ul li input[type=radio]{
  position: absolute;
  visibility: hidden;
}

ul li label{
  display: block;
  position: relative;
  font-weight: 300;
  font-size: 1.35em;
  padding: 25px 25px 25px 80px;
  margin: 10px auto;
  height: 30px;
  z-index: 9;
  cursor: pointer;
  -webkit-transition: all 0.25s linear;
}

ul li:hover label{
	color: #FFFFFF;
}

ul li .check{
  display: block;
  position: absolute;
  border: 5px solid #AAAAAA;
  border-radius: 100%;
  height: 25px;
  width: 25px;
  top: 30px;
  left: 20px;
	z-index: 5;
	transition: border .25s linear;
	-webkit-transition: border .25s linear;
}

ul li:hover .check {
  border: 5px solid #FFFFFF;
}

ul li .check::before {
  display: block;
  position: absolute;
	content: '';
  border-radius: 100%;
  height: 15px;
  width: 15px;
  top: 5px;
	left: 5px;
  margin: auto;
	transition: background 0.25s linear;
	-webkit-transition: background 0.25s linear;
}

input[type=radio]:checked ~ .check {
  border: 5px solid #0DFF92;
}

input[type=radio]:checked ~ .check::before{
  background: #0DFF92;
}

<ul>
  <li>
    <input type="radio" id="f-option" name="selector">
    <label for="f-option">Male</label>
    
    <div class="check"></div>
  </li>
  
  <li>
    <input type="radio" id="s-option" name="selector">
    <label for="s-option">Female</label>
    
    <div class="check"><div class="inside"></div></div>
  </li>
  
  <li>
    <input type="radio" id="t-option" name="selector">
    <label for="t-option">Transgender</label>
    
    <div class="check"><div class="inside"></div></div>
  </li>
</ul>

<html>
    <head>
    </head>
    <body>

<style>
.redradio {border:5px black solid;border-radius:25px;width:25px;height:25px;background:red;float:left;}
.greenradio {border:5px black solid;border-radius:25px;width:29px;height:29px;background:green;float:left;}
.radiobuttons{float:left;clear:both;margin-bottom:10px;}
</style>
<script type="text/javascript">
<!--
function switchON(groupelement,groupvalue,buttonelement,buttonvalue) {
    var groupelements = document.getElementById(groupelement);
    var buttons = groupelements.getElementsByTagName("button");
    for (i=0;i<buttons.length;i++) {
        if (buttons[i].id.indexOf("_on") != -1) {
            buttons[i].style.display="none";
        } else {
            buttons[i].style.display="block";
        }
    }
    var buttonON = buttonelement + "_button_on";
    var buttonOFF = buttonelement + "_button_off";
    document.getElementById(buttonON).style.display="block";
    document.getElementById(buttonOFF).style.display="none";
    document.getElementById(groupvalue).value=buttonvalue;
}
// -->
</script>

<form>
    <h1>farbige Radiobutton</h1>
    <div id="button_group">
        <input type="hidden" name="button_value" id="button_value" value=""/>
        <span class="radiobuttons">
            <button type="button" value="OFF1" name="button1_button_off" id="button1_button_off" onclick="switchON('button_group','button_value','button1',this.value)" class="redradio"></button>
            <button type="button" value="ON1" name="button1_button_on" id="button1_button_on" style="display:none;" class="greenradio"></button>
            <label for="button1_button_on">&nbsp;&nbsp;Ich will eins</label>
        </span><br/>
        <span class="radiobuttons">
            <button type="button" value="OFF2" name="button2_button_off" id="button2_button_off" onclick="switchON('button_group','button_value','button2',this.value)" class="redradio"></button>
            <button type="button" value="ON2" name="button2_button_on" id="button2_button_on" style="display:none;" class="greenradio"></button>
            <label for="button2_button_on">&nbsp;&nbsp;Ich will zwei</label>
        </span><br/>
        <span class="radiobuttons">
            <button type="button" value="OFF3" name="button3_button_off" id="button3_button_off" onclick="switchON('button_group','button_value','button3',this.value)" class="redradio"></button>
            <button type="button" value="ON3" name="button3_button_on" id="button3_button_on" style="display:none;" class="greenradio"></button>
            <label for="button3_button_on">&nbsp;&nbsp;Ich will drei</label>
        </span><br/>
        <span class="radiobuttons">
            <button type="button" value="OFF4" name="button4_button_off" id="button4_button_off" onclick="switchON('button_group','button_value','button4',this.value)" class="redradio"></button>
            <button type="button" value="ON4" name="button4_button_on" id="button4_button_on" style="display:none;" class="greenradio"></button>
            <label for="button4_button_on">&nbsp;&nbsp;Ich will vier</label>
        </span>
    </div>
</form>

    </body>
</html>