¿Cómo cambiar el tamaño del botón de radio usando CSS?

¿Hay alguna forma de controlar el tamaño del botón de opción en CSS?

Sí, debería poder establecer su altura y ancho, como con cualquier elemento. Sin embargo, algunos navegadores realmente no tienen en cuenta estas propiedades.

Esta demostración ofrece una descripción general de lo que es posible y cómo se muestra en varios navegadores: https://www.456bereastreet.com/lab/styling-form-controls-revisited/radio-button/

Como verá, diseñar botones de opción no es fácil :-D

Una solución alternativa es usar JavaScript y CSS para reemplazar los botones de opción y otros elementos del formulario con imágenes personalizadas:

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

Este CSS parece hacer el truco:

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

Establecer el borde en 0 parece permitir al usuario cambiar el tamaño del botón y hacer que el navegador lo represente en ese tamaño, por ejemplo. la altura anterior: 2em representará el botón al doble de la altura de la línea. Esto también funciona para casillas de verificación (input[type=checkbox] ). Algunos navegadores se procesan mejor que otros.

Desde una caja de Windows, funciona en IE8 +, FF21 +, Chrome29 +.

Antigua pregunta, pero ahora hay una solución simple, compatible con la mayoría de los navegadores, que es usar CSS3. Probé en IE, Firefox y Chrome y funciona.

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

Cambie el valor 1.5, en este caso un incremento del 50% en tamaño, según sus necesidades. Si la proporción es muy alta, puede desenfocar el botón de opción. La siguiente imagen muestra una relación de 1,5.

Puede controlar el tamaño del botón de radio con el estilo CSS:

style = "altura: 35 px; ancho: 35 px;"

Esto controla directamente el tamaño del botón de opción.

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

No directamente. De hecho, los elementos de formulario en general son problemáticos o imposibles de diseñar utilizando solo CSS. el mejor enfoque es:

1. ocultar el botón de radio usando javascript.
2. Use javascript para agregar / mostrar HTML que se puede diseñar como desee, por ejemplo
3. Defina las reglas CSS para un estado seleccionado, que se activa agregando una clase "seleccionada" a su intervalo.
4. Finalmente, escriba javascript para que el estado del botón de opción reaccione a los clics en el intervalo y, viceversa, para que el intervalo reaccione a los cambios en el estado del botón de opción (para cuando los usuarios usan el teclado para acceder al formulario). la segunda parte de esto puede ser difícil de hacer en todos los navegadores. Utilizo algo como lo siguiente (que también usa jQuery. También evito agregar tramos adicionales al diseñar y aplicar la clase "seleccionada" directamente a las etiquetas de entrada).

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>

Cambiar el tamaño del widget predeterminado no funciona en todos los navegadores, pero puede crear botones de opción personalizados con JavaScript. Una de las formas es crear botones de opción ocultos y luego colocar sus propias imágenes en su página. Al hacer clic en estas imágenes se cambian las imágenes (reemplaza la imagen en la que se hizo clic con una imagen con un botón de opción en un estado seleccionado y reemplaza las otras imágenes con botones de opción en un estado no seleccionado) y selecciona el nuevo botón de opción.

De todos modos, existe documentación sobre este tema. Por ejemplo, lea esto: Estilo de casillas de verificación y botones de opción con CSS y JavaScript .

He aquí un enfoque. De forma predeterminada, los botones de opción eran aproximadamente el doble de grandes que las etiquetas.
(Ver código CSS y HTML al final de la respuesta)

Safari: 10.0.3

Chrome: 56.0.2924.87

Firefox: 50.1.0

Internet Explorer: 9 (La confusión no es culpa de IE, prueba alojada en 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>                

Directamente no puedes hacer esto. [Según mi conocimiento].

Debería utilizar imagespara reemplazar los botones de opción. Puede hacer que funcionen de la misma manera que los botones de opción en la mayoría de los casos, y puede hacerlos del tamaño que desee.

También puede usar la propiedad transform, con el valor requerido en escala:

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

Esto funciona bien para mí en todos los navegadores:

(estilo en línea para simplificar ...)

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

El tamaño tanto del botón de opción como del texto cambiará con el tamaño de fuente de la etiqueta.

prueba este código ... puede ser la respuesta que buscas exactamente

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>