Resumen de IA
¿Te gustaría personalizar los campos de Casilla de verificación y Opción para que parezcan botones? Usando CSS puedes cambiar fácilmente la visualización de estas entradas a botones que coincidan con los colores de tu marca específica e incluso resalten en la página cuando el usuario pase el cursor sobre cada selección y para todas las selecciones activas. En este tutorial, te guiaremos paso a paso sobre cómo lograr esto.
Por defecto, los campos de formulario de Casilla de verificación aparecen con una casilla delante de la etiqueta para marcar. Los campos de formulario de Opción también tienen el mismo estilo predeterminado.
Sin embargo, con la magia de CSS, puedes estilizar fácilmente estos campos para que parezcan botones en lugar de solo casillas para marcar. En este tutorial, te daremos el CSS necesario para realizar este cambio de estilo.
Creación del formulario
Para empezar, crearemos un nuevo formulario y añadiremos nuestros campos. Nuestro formulario contendrá un solo campo de Casilla de verificación y un solo campo de Opción Múltiple.
A medida que se añaden estos campos, haz clic en la pestaña Avanzado y en el menú desplegable Diseño de opciones, selecciona En línea.
Añadir el CSS
Ahora es el momento de añadir nuestra magia CSS. Simplemente copia y pega este CSS en tu sitio.
Si necesitas ayuda sobre cómo y dónde añadir CSS a tu sitio, consulta este tutorial.
Campos de casilla de verificación y opción múltiple para un formulario específico
Todos los campos de casilla de verificación y opción múltiple para todos los formularios
Alternativamente, podrías cambiar todos tus campos de Casilla de verificación y Opción Múltiple para todos los formularios usando este CSS.
Y eso es todo lo que necesitas para personalizar los campos de Casilla de verificación y Opción. ¿Te gustaría también personalizar el campo de Números? Echa un vistazo a nuestro tutorial sobre Cómo eliminar las flechas en el campo de números.