Comment modifier la taille d'un bouton radio à l'aide de CSS ?

Question

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

Answer 1

Ce fichier 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 faire en sorte que le navigateur le rende dans cette taille. Par exemple, la valeur ci-dessus height : 2em rendra le bouton à deux fois la hauteur de la ligne. Cela fonctionne également pour les cases à cocher ( input[type=checkbox] ). Certains navigateurs offrent un meilleur rendu que d'autres.

Depuis un poste Windows, il fonctionne dans IE8+, FF21+, Chrome29+.

Answer 2

Oui, vous devriez pouvoir définir sa hauteur et sa largeur, comme pour tout élément. Toutefois, certains navigateurs ne tiennent pas vraiment compte de ces propriétés.

Cette démo donne un aperçu de ce qui est possible et de la façon dont cela s'affiche 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/

Answer 3

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

1. masquer le bouton radio en utilisant le javascript.
2. Utilisez le javascript pour ajouter/afficher du HTML qui peut être stylisé comme vous le souhaitez, par ex.
3. Définissez des règles css pour un état sélectionné, qui est déclenché par l'ajout d'une classe "selected" à votre span.
4. Enfin, écrivez du javascript pour que l'état du bouton radio réagisse aux clics sur le span, et, vice versa, pour que le span réagisse aux changements d'état du bouton radio (lorsque les utilisateurs utilisent le clavier pour accéder au formulaire). La deuxième partie de ce processus peut être difficile à faire fonctionner sur tous les navigateurs. J'utilise quelque chose comme ce qui suit (qui utilise également jQuery. J'évite également d'ajouter des travées supplémentaires en stylisant et en appliquant la classe "selected" directement aux étiquettes de saisie).

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>

Answer 4

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'une des méthodes consiste à créer des boutons radio cachés, puis à placer vos propres images sur votre page. En cliquant sur ces images, vous modifiez les images (vous remplacez l'image cliquée par une image avec un bouton radio dans un état sélectionné et vous remplacez les autres images par des boutons radio dans un état non sélectionné) et vous sélectionnez le nouveau bouton radio.

Quoi qu'il en soit, il existe une documentation sur ce sujet. Par exemple, lisez ceci : Stylisation des cases à cocher et des boutons radio avec CSS et JavaScript .

Answer 5

Directement, vous ne pouvez pas le faire. [D'après mes connaissances].

Vous devez utiliser images pour 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 que vous voulez.