Saltar al contenido

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

Agradeceríamos tu apoyo para difundir nuestras reseñas sobre las ciencias de la computación.

Solución:

Sí, debería poder establecer su alto 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 radio no es fácil 😀

Una solución 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. the above height: 2em renderizará el botón al doble de la altura de la línea. Esto también funciona para las casillas de verificación (input[type=checkbox]). Algunos navegadores funcionan mejor que otros.

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

Pregunta antigua 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);

cambiar 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.

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

Acuérdate de que tienes la capacidad de parafrasear tu experiencia .

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *