Cómo personalizar los estilos del campo Opción múltiple

¿Te gustaría personalizar el color del campo de Opción múltiple? Por defecto, este campo usará el estilo web estándar para mostrarlo en tu formulario. En este artículo, te mostraremos lo fácil que es hacer esto con el poder de CSS.

Sin embargo, si estás usando el Editor de bloques de WPForms, puedes ajustar fácilmente estos estilos sin necesidad de CSS personalizado. Para leer más sobre esto, echa un vistazo a esta útil guía. Cuando cambies los Estilos de campo y los Estilos de botón, podrás lograr exactamente lo mismo en el editor de bloques que con el CSS personalizado en este artículo.

En este artículo, trabajaremos usando la magia del CSS personalizado para hacer estos cambios.

Creación del formulario

Para empezar, crearás tu formulario y añadirás los campos que necesites, que incluirán al menos un campo de Opción múltiple.

Si necesitas ayuda para crear tu formulario, puedes revisar fácilmente esta útil guía.

Una vez que hayas añadido el campo de Opción múltiple, haz clic en la pestaña Avanzado y, dentro de Clases CSS, añade special-radio-buttons. Usaremos esto como un disparador para llamar a nuestro CSS personalizado.

Personalizar el estilo del campo de opción múltiple

Una vez que hayas guardado el formulario, puedes añadir tu CSS. Si no estás seguro de dónde o cómo añadir CSS personalizado a tu sitio, por favor revisa este tutorial para obtener ayuda.

.special-radio-buttons input[type=radio] {
    -webkit-appearance: none !important;
    appearance: none !important;
    background-color: #ffffff !important;
    margin: 0 !important;
    color: #e27730 !important;
    width: 1.15em !important;
    height: 1.15em !important;
    border: 0.15em solid #e27730 !important;
    border-radius: 50% !important;
    transform: translateY(-0.075em) !important;
    display: grid !important;
    place-content: center !important;
}

.special-radio-buttons input[type=radio]:checked:before {
    transform: scale(1) !important;
}

.special-radio-buttons input[type=radio]:before {
    content: "" !important;
    border-radius: 50% !important;
    transform: scale(0) !important;
    transition: 120ms transform ease-in-out !important;
    box-shadow: inset 1em 1em #e27730 !important;
    border: 1px solid #e27730 !important;
}

.special-radio-buttons input[type=radio]:checked:after {
    background-color: #e27730 !important;
}

Este CSS cambiará el color del borde y de la selección a #e27730, pero también añadirá una pequeña animación al realizar las selecciones.

Ya sea que uses el estilo del editor de bloques o CSS personalizado, puedes personalizar fácilmente los colores del campo de Opción múltiple. ¿Sabías que también puedes hacer que las opciones del campo de Opción múltiple parezcan botones? Echa un vistazo a nuestro tutorial sobre Cómo personalizar campos de casilla de verificación y radio para que parezcan botones.