### [Cómo personalizar las casillas de verificación y los botones de opción para que parezcan botones](https://wpforms.com/developers/how-to-customize-checkbox-and-radio-fields-to-look-like-buttons/)

**Publicado:** 30 de octubre de 2020
**Autor:** Umair Majeed

**Extracto:** En este artículo te mostraremos cómo utilizar CSS para dar estilo a los campos de casilla de verificación y de opción para que parezcan botones. 

**Contenido:**

¿Te gustaría personalizar los campos de **casilla de verificación** y de **opción** para que parezcan botones? Con [CSS](https://www.wpbeginner.com/glossary/css/ "¿Qué es: CSS") puedes cambiar fácilmente la apariencia de estos campos de entrada para que se vean como botones con colores que combinen con tu marca específica, e incluso hacer que resalten en la página cuando el usuario pase el cursor por encima de cada opción y para todas las opciones activas. En este tutorial, te guiaremos paso a paso para que consigas este resultado.

Por defecto, los campos de formulario **Casilla de verificación** aparecen con un cuadro delante de la etiqueta que se debe marcar. Los campos de formulario **Opción de radio** también tienen el mismo estilo predeterminado.

![Los campos de casilla de verificación y de opción múltiple vienen con su propio CSS básico predeterminado para el estilo](https://wpforms.com/wp-content/uploads/2020/10/wpforms-checkbox-radio-default-styling.jpg)Sin embargo, gracias a la magia del CSS, puedes aplicar fácilmente un estilo a estos campos para que parezcan botones en lugar de simples casillas que hay que marcar. En este tutorial, te proporcionaremos 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 único campo de **casilla de verificación**, así como un único 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ñade tus campos y configura el diseño de selección de los campos de casilla de verificación y de opción múltiple en «Inline» desde la pestaña «Avanzado»](https://wpforms.com/wp-content/uploads/2020/10/wpforms-choice-layout-inline.jpg)## Añadir el CSS

Ahora es el momento de añadir nuestra magia CSS. Simplemente copia y pega este CSS en tu sitio web.

Si necesitas ayuda sobre cómo y dónde añadir CSS a tu sitio web, [consulta este tutorial](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ «Cómo añadir estilos CSS personalizados para WPForms»).

#### Campos de casilla de verificación y de opción múltiple para un formulario específico

Recuerda cambiar `form#wpforms-form-1000` por el ID de tu propio formulario. Si necesitas ayuda para encontrar el ID específico de tu formulario, [consulta este tutorial](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/).

#### Todos los campos de casilla de verificación y de opción múltiple para todos los formularios

Como alternativa, puede cambiar todos los campos de **casilla de verificación** y **opción múltiple** de todos los formularios utilizando este CSS.

![Con CSS puede personalizar los campos de casilla de verificación y radio para que parezcan botones](https://wpforms.com/wp-content/uploads/2020/10/wpforms-checkbox-radio-buttons-css.jpg)Solo tienes que recordar actualizar cualquier referencia de color en el CSS para que coincida con los colores que desees utilizar.

Y eso es todo lo que necesitas para personalizar los campos **Casilla de verificación** y **Botón de opción**. ¿Te gustaría personalizar también el campo **Números**? Echa un vistazo a nuestro tutorial sobre [Cómo eliminar las flechas del campo de números](https://wpforms.com/developers/how-to-remove-the-arrows-on-the-numbers-field/ "Cómo eliminar las flechas del campo de números").

**Categorías:** Campos

**Etiquetas:** CSS

---