Cambio de tamaño del botón de opción

Quiero cambiar el tamaño de un control de botón de radio usando solo HTML y / o CSS.

¿Es posible prescindir del uso de imágenes?

Una solución rápida para cambiar el tamaño del botón de radio es transformarlo:

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

Esto da como resultado que todos los botones de radio sean dos veces más grandes. Como siempre, revise el soporte del navegador .

Respuesta original (27 de mayo de 2012)

No puede cambiar el tamaño del botón de radio. Normalmente, las personas diseñarán un elemento de IU personalizado para reemplazar el aspecto de IU de la checkbox / botón de radio. Al hacer clic en él, se hace clic en el botón de selección / botón de opción subyacente.

Vea un ejemplo aquí: http: //webdesign.maratz.com…radio-buttons/jquery.html

No realmente, no de manera cruzada. En Firefox, Safari y Chrome, puede eliminar el estilo predeterminado de botón de radio configurando appearance:none; (con los prefijos del proveedor), luego puede darle el estilo que desee. Pero IE y Opera aún no lo admiten.

La única manera confiable de lograr casillas con estilo es usar javascript para hacer que un elemento diferente actúe como una checkbox. Pero, por supuesto, entonces estás atormentando a las personas con javascript deshabilitado. Al final, el problema es lo suficientemente rígido como para que deje las casillas sin estilo, excepto para el posicionamiento.

Dado HTML similar al siguiente:

   

El siguiente CSS le permite agregar una clase para cambiar el tamaño del elemento de radio ‘falso’:

 /* Hiding the radio inputs: */ input[type=radio] { display: none; } /* styling the spans adjacent to the radio inputs: */ input[type=radio] + span { display: inline-block; border: 1px solid #000; border-radius: 50%; margin: 0 0.5em; } /* styling the span following the checked radio: */ input[type=radio]:checked + span { background-color: #ffa; } /* defining the height/width for the span-radio: */ .radio1 { width: 0.5em; height: 0.5em; } /* and so on... */ 

Demostración de JS Fiddle .

La versión anterior requiere un elemento adicional, que se siente innecesario, pero permite la omisión de los atributos for y id de la label y input elementos de input (respectivamente). Sin embargo, si puede usar esos atributos, los elementos de span no son necesarios, lo que permite HTML como el siguiente:

   

Con el CSS:

 input[type=radio] { display: none; } /* Creating the psuedo-element to replace the radio inputs: */ input[type=radio] + label::before { content: ''; display: inline-block; border: 1px solid #000; border-radius: 50%; margin: 0 0.5em; } /* styling the checked 'radio': */ input[type=radio]:checked + label::before { background-color: #ffa; } /* defining the height/width of the 'radio' according to the class of the radio input element: */ .radio1 + label::before { width: 0.5em; height: 0.5em; } /* and so on... */ 

Demostración de JS Fiddle .

No hace falta decir, por supuesto, que estos enfoques requieren navegadores que entiendan la pseudoclase :checked y, en el caso de la última aproximación, un navegador que implemente elementos psuedo. Teniendo esto en cuenta, lamentablemente, ninguno de estos enfoques puede usarse en Internet Explorer antes de la versión nueve (cuando comenzó a implementar el selector :checked ).

Referencias

  • ‘Selectores de CSS’ en Quirksmode .

El botón de estilo de radio no es tan fácil como otros elementos de formulario, pero aún puede hacerlo con la ayuda de css, estableciendo alto y ancho, pero el diseño es diferente de los navegadores. El aspecto y el tacto del tamaño se pueden cambiar, consulte este enlace para referencia , http://www.456bereastreet.com/lab/styling-form-controls-revisited/radio-button/

Usted puede preferir las imágenes javascript o UI para cambios claros.

Gracias ..

si no te importa IE8, puedes hacer:

HTML:

 

CSS:

 .cb_wrap{ position: relative } input{ opacity: 0; position: relative; z-index: 10; } .cb_dummy{ position: absolute; top: 0; left: 0; z-index: 0; width: 15px; height: 15px; background: #f00; /* use some image */ } input:checked + .cp_dummy{ background: #0f0; /* use some image */ } 

Demostración: http://jsfiddle.net/FKqj3/