web-dev-qa-db-fra.com

Comment changer la taille du bouton radio en utilisant CSS?

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

htmlcssradio-button
74
Misha Moroshko

Oui, vous devriez pouvoir définir sa hauteur et sa largeur comme avec 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. http://www.456bereastreet.com/lab/styling-form-controls-revisited/radio-button/

Comme vous le verrez, le bouton radio de style 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:
http://www.emblematiq.com/lab/niceforms/
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
...

47
LapinLove404

Bien qu’une vieille question, c’est elle qui a recueilli le plus grand nombre de votes. J'ai une autre solution que j'ai découverte récemment. Ce css semble faire l'affaire.

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

Définir la bordure sur 0 semble permettre à l’utilisateur de changer la taille du bouton et d’être rendu par le navigateur dans cette taille, par exemple. la hauteur ci-dessus: 2em rendra le bouton deux fois plus haut que la ligne. Cela fonctionne aussi pour les cases à cocher (input [type = checkbox]). Certains navigateurs rendent mieux que d'autres.

Depuis une fenêtre, cela fonctionne dans ie8 +, ff21 +, chrome29 +.

À votre santé.

30
user2745744

Ancienne question, mais il existe maintenant une solution simple, compatible avec la plupart des navigateurs, qui consiste à 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, augmentez la taille de 50% en fonction de vos besoins. Si le rapport est très élevé, le bouton radio peut être flou. L'image suivante montre un ratio de 1,5.

 enter image description here

 enter image description here

20
João Pimentel Ferreira

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

  1. cacher le bouton radio en utilisant javascript.
  2. Utilisez javascript pour ajouter/afficher du code HTML pouvant être stylé comme vous le souhaitez, par exemple. 
  3. Définissez les règles CSS pour un état sélectionné, qui est déclenché en ajoutant une classe "sélectionnée" à votre étendue.
  4. Enfin, écrivez en javascript pour que l'état du bouton radio réagisse aux clics sur l'étendue, et inversement, pour que cette dernière réagisse aux modifications de l'é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 d'ajouter des étendues supplémentaires en stylant et en appliquant la classe "sélectionnée" 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>
4
wheresrhys

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

Safari: 10.0.3

 enter image description here

Chrome: 56.0.2924.87

 enter image description here

Firefox: 50.1.0

 enter image description here

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

 enter image description here

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>
3
clearlight

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 cachés, puis à placer vos propres images sur votre page. Cliquer sur ces images change les images (remplace l'image cliquée par une image par 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 une documentation à ce sujet. Par exemple, lisez ceci: Styling Checkboxes and Radio Buttons avec CSS et JavaScript .

3
Arseny

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

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

Ceci contrôle directement la taille du bouton radio.

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

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

Vous devez utiliserimagespour 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 créer à n'importe quelle taille.

1
Harry Joy

Cela fonctionne bien pour moi dans tous les navigateurs:

(style en ligne pour la 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 police de l'étiquette.

0
Ron Richardson

Vous pouvez également utiliser la propriété de transformation, avec la valeur requise en scale:

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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
input[type="radio"] {
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
    transform: scale(1.5);
}
  </style>
</head>
<body>

<div class="container">
  <h2>Form control: inline radio buttons</h2>
  <p>The form below contains three inline radio buttons:</p>
  <form>
    <label class="radio-inline">
      <input type="radio" name="optradio">Option 1
    </label>
    <label class="radio-inline">
      <input type="radio" name="optradio">Option 2
    </label>
    <label class="radio-inline">
      <input type="radio" name="optradio">Option 3
    </label>
  </form>
</div>

</body>
</html>

0
Waruna Manjula