Comment changer la taille du bouton radio en utilisant CSS?

Est-il possible de contrôler la taille du bouton radio en CSS?

Oui, vous devriez pouvoir définir sa hauteur et sa largeur comme pour tout élément. Cependant, 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 comment il est affiché dans divers navigateurs. http://www.456bereastreet.com/lab/styling-form-controls-revisited/radio-button/

Comme vous le verrez, le bouton radio du style n’est pas facile 😀

Une solution consiste à utiliser javascript et css pour remplacer les boutons radio et d’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/

Bien que ce soit une vieille question, elle a eu le plus de votes sur le sujet. J’ai une autre solution que j’ai trouvée récemment. Ce css semble faire l’affaire.

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

Définir la bordure à 0 semble permettre à l’utilisateur de changer la taille du bouton et 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 (entrée [type = case à cocher]). Certains navigateurs sont plus performants que d’autres.

A partir d’une fenêtre Windows, cela fonctionne dans ie8 +, ff21 +, chrome29 +.

À votre santé.

Ancienne question, mais maintenant il existe une solution simple, compatible avec la plupart des navigateurs, qui consiste à utiliser CSS3 . J’ai testé dans IE, Firefox et Chrome et ça marche.

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

Changez la valeur 1.5 , dans ce cas un incrément de 50% en taille, selon vos besoins. Si le ratio est très élevé, le bouton radio peut être flou. L’image suivante montre un ratio de 1,5.

entrer la description de l'image ici

entrer la description de l'image ici

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. Un clic sur ces images modifie 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 une documentation à ce sujet. Par exemple, lisez ceci: Boîtes de contrôle de style et boutons radio avec CSS et JavaScript .

Pas directement. En fait, les éléments de forme en général sont soit problématiques, soit impossibles à coiffer en utilisant CSS seul. la meilleure approche est de:

  1. Masquer le bouton radio en utilisant javascript.
  2. Utilisez javascript pour append / afficher du code HTML pouvant être stylé
  3. Définissez les règles CSS pour un état sélectionné, qui est déclenché en ajoutant une classe “sélectionnée” à votre période.
  4. Enfin, écrivez javascript pour que l’état du bouton radio réagisse aux clics sur l’intervalle et vice versa pour que l’intervalle 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 de cette tâche peut être délicate à faire fonctionner sur tous les navigateurs. J’utilise quelque chose comme ce qui suit (qui utilise également jQuery. J’évite d’append des extensions supplémentaires en stylisant 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

 

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

style = “height: 35px; width: 35px;”

Cela contrôle directement la taille du bouton radio.

  

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

entrer la description de l'image ici


Chrome: 56.0.2924.87

entrer la description de l'image ici


Firefox: 50.1.0

entrer la description de l'image ici


Internet Explorer: 9 (fuzziness pas la faute d’IE, test hébergé sur netrenderer.com)

entrer la description de l'image ici


CSS:

 .sortOptions > label { font-size: 8px; } .sortOptions > input[type=radio] { width: 10px; height: 10px; } 

HTML:

 
Answers

Directement vous ne pouvez pas le faire. [Selon mes connaissances].

Vous devez utiliser des 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 leur donner la taille de votre choix.

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

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

Form control: inline radio buttons

The form below contains three inline radio buttons:

Cela fonctionne très bien pour moi dans tous les navigateurs:

(style en ligne pour la simplicité …)

  

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

essayez ce code … il 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; } 
 
       

farbige Radiobutton