### [Cómo personalizar los estilos del campo de opción múltiple](https://wpforms.com/developers/how-to-customize-the-multiple-choice-field-styles/)
**Publicado:** 6 de febrero de 2024
**Autor:** Equipo Editorial
**Extracto:** Este artículo te mostrará cómo puedes personalizar los colores del campo de Opción Múltiple usando CSS.
**Contenido:**
¿Te gustaría personalizar el color del campo de **Opción Múltiple**? Por defecto, este campo usará estilos web estándar para mostrar el campo en tu formulario. En este artículo, te explicaremos 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](https://wpforms.com/how-to-style-wpforms-using-the-block-editor/ "Cómo estilizar WPForms usando el editor de bloques"). Cuando cambias los **Estilos de Campo** y los **Estilos de Botón**, puedes lograr exactamente lo mismo en el editor de bloques que con el CSS personalizado en este artículo.
El uso de los **Estilos de Botón** del editor de bloques no solo cambia el botón de **Enviar** y el campo de **Opción Múltiple**, sino que también cambiará los colores del campo de **Casilla de Verificación**.
En este artículo, vamos a trabajar 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, lo que incluirá al menos un campo de **Opción Múltiple**.
Si necesitas ayuda para crear tu formulario, [puedes revisar fácilmente esta útil guía](https://wpforms.com/docs/creating-first-form/ "Creación de tu primer formulario").
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.
## Personalización del 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](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "Cómo añadir estilos CSS personalizados para WPForms").
```
.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 la selección a `#e27730`, pero también añadirá una pequeña animación cuando se realicen las selecciones.
Ya sea que uses los estilos del editor de bloques o el 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 los campos de casilla de verificación y radio para que parezcan botones](https://wpforms.com/developers/how-to-customize-checkbox-and-radio-fields-to-look-like-buttons/ "Cómo personalizar los campos de casilla de verificación y radio para que parezcan botones").
**Categorías:** Campos
**Etiquetas:** CSS
---