### [Cómo personalizar los estilos del campo de casilla de verificación](https://wpforms.com/developers/how-to-customize-the-checkbox-field-styles/)
**Publicado:** 9 de febrero de 2024
**Autor:** Equipo Editorial
**Extracto:** En este artículo te mostraremos cómo personalizar el color del campo de casilla de verificación utilizando el editor de bloques de WPForms o CSS personalizado.
**Contenido:**
¿Te gustaría personalizar el color del campo **Casilla de verificación**? Por defecto, este campo utilizará estilos web estándar para mostrar el campo en tu formulario. En este artículo, te guiaremos sobre lo fácil que es hacer esto con el poder de CSS.
Sin embargo, si estás utilizando 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 **Enviar** y el campo **Casilla de verificación**, sino que también cambiará los colores del campo **Opción múltiple**.
En este artículo, vamos a trabajar utilizando la magia del CSS personalizado para realizar 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 **Casilla de verificación**.
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 **Casilla de verificación**, haz clic en la pestaña **Avanzado** y, dentro de **Clases CSS**, añade `special-checkbox-buttons`. Usaremos esto como un disparador para llamar a nuestro CSS personalizado.
## Personalización del estilo del campo de casilla de verificación
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, [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-checkbox-buttons input[type="checkbox"] {
-webkit-appearance: none !important;
appearance: none !important;
background-color: #fff !important;
margin: 0 !important;
font: inherit !important;
color: #e27730 !important;
width: 1.15em !important;
height: 1.15em !important;
border: 0.15em solid #e27730 !important;
border-radius: 0.15em !important;
transform: translateY(-0.075em) !important;
display: grid !important;
place-content: center !important;
}
.special-checkbox-buttons input[type="checkbox"]::before {
content: "" !important;
width: 0.65em !important;
height: 0.65em !important;
transform: scale(0) !important;
transition: 120ms transform ease-in-out !important;
box-shadow: inset 1em 1em #e27730 !important;
transform-origin: bottom left !important;
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%) !important;
}
.special-checkbox-buttons input[type="checkbox"]:checked::before {
transform: scale(1) !important;
position: relative !important;
top: 0 !important;
left: 0 !important;
}
.special-checkbox-buttons input[type=checkbox]:checked:after {
content: none !important;
}
```
Este CSS cambiará el color del borde y la selección a `#e27730`, pero también añadirá una pequeña animación al realizar las selecciones.
Ya sea que uses los estilos del editor de bloques o el CSS personalizado, puedes personalizar fácilmente los colores del campo **Casilla de verificación**. ¿Buscas la misma funcionalidad para el campo **Opción múltiple**? Echa un vistazo a nuestro artículo sobre [Cómo personalizar los estilos del campo de opción múltiple](https://wpforms.com/developers/how-to-customize-the-multiple-choice-field-styles/ "Cómo personalizar los estilos del campo de opción múltiple").
**Categorías:** Estilos
**Etiquetas:** CSS
---