Cómo personalizar los campos Checkbox y Radio para que parezcan botones

¿Le gustaría personalizar los campos Checkbox y Radio para que parezcan botones? Utilizando CSS puede cambiar fácilmente la visualización de estas entradas a los botones que son colores adaptados a su marca específica e incluso pop fuera de la página cuando el usuario se desplaza sobre cada selección y para cualquier y todas las selecciones activas. En este tutorial, vamos a caminar a través de cada paso sobre cómo lograr esto.

Por defecto, los campos de formulario Checkbox aparecen con una caja delante de la etiqueta a marcar. Los campos de formulario Radio también tienen el mismo estilo de formulario por defecto.

Sin embargo, con la magia de CSS, puedes modificar fácilmente el estilo de estos campos para que parezcan botones en lugar de simples casillas a marcar. En este tutorial, te daremos el CSS necesario para hacer 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 Checkbox y un único campo Multiple Choice.

Al añadir cada uno de estos campos, haga clic en la pestaña Avanzado y, en el menú desplegable Diseño de elección, seleccione 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.

Casillas de verificación y campos de opción múltiple para un formulario específico

.wpforms-container form#wpforms-form-1015 input[type=radio], 
.wpforms-container form#wpforms-form-1015 input[type=checkbox] {
    display:none;
}

.wpforms-container form#wpforms-form-1015 input[type=radio] + label, 
.wpforms-container form#wpforms-form-1015 input[type=checkbox] + label {
    padding: 5px 10px;
    background-color: #e7e7e7;
    border-color: #ddd;
    transition: background-color 0.3s ease-in-out;
	border-radius: 3px;
}

form#wpforms-form-1015 input[type=radio]:checked + label, 
form#wpforms-form-1015 input[type=checkbox]:checked + label, 
form#wpforms-form-1015 input[type=radio]:checked + label, 
.wpforms-container form#wpforms-form-1015 input[type=radio] + label:hover, 
.wpforms-container form#wpforms-form-1015 input[type=checkbox] + label:hover {
    background-image: none;
    background-color: #b95d52;
	color: #ffffff;
    cursor: pointer;
}

.wpforms-container form#wpforms-form-1015 ul li {
    margin: 5px !important;
}

/* Start of media query to remove hover styles */
@media (hover: none) {
	.wpforms-container form#wpforms-form-1015 input[type=radio] + label:hover, 
	.wpforms-container form#wpforms-form-1015 input[type=checkbox] + label:hover {
		background-color: #e7e7e7 !important;
		border-color: #ddd !important;
		color: inherit !important;
	}

	.wpforms-container form#wpforms-form-1015 input[type=radio]:checked + label, 
	.wpforms-container form#wpforms-form-1015 input[type=checkbox]:checked + label, 
	.wpforms-container form#wpforms-form-1015 input[type=radio]:checked + label {
		background-image: none !important;
		background-color: #b95d52 !important;
		color: #ffffff !important;
		cursor: pointer !important;
	}

}

Todas las casillas de verificación y los campos de opción múltiple de todos los formularios

Alternativamente, usted podría cambiar todos sus campos Checkbox y Multiple Choice para todos los formularios usando este CSS.

.wpforms-container input[type=radio], 
.wpforms-container input[type=checkbox] {
    display:none !important; 
}
 
.wpforms-container input[type=radio] + label, 
.wpforms-container input[type=checkbox] + label {
    padding: 5px 10px !important;
    background-color: #e7e7e7 !important;
    border-color: #ddd !important;
    transition: background-color 0.3s ease-in-out !important;
    border-radius: 3px !important;
}
 
.wpforms-container input[type=radio]:checked + label, 
.wpforms-container input[type=checkbox]:checked + label, 
.wpforms-container input[type=radio]:checked + label, 
.wpforms-container input[type=radio] + label:hover, .wpforms-container input[type=checkbox] + label:hover {
    background-image: none !important;
    background-color: #b95d52 !important;
    color: #ffffff !important;
    cursor: pointer !important;
}
 
.wpforms-container ul li {
    margin: 5px !important;
}


/* Start of media query to remove hover styles */
@media (hover: none) {
.wpforms-container input[type=radio] + label:hover, 
	.wpforms-container input[type=checkbox] + label:hover {
	background-color: #e7e7e7 !important;
    border-color: #ddd !important;
	color: inherit !important;
}
	.wpforms-container input[type=radio]:checked + label, 
	.wpforms-container input[type=checkbox]:checked + label, 
	.wpforms-container input[type=radio]:checked + label {
    background-image: none !important;
    background-color: #b95d52 !important;
    color: #ffffff !important;
    cursor: pointer !important;
}

}

Y eso es todo lo que necesita para personalizar los campos Casilla de verificación y Radio. ¿Quiere personalizar también el campo Números? Eche un vistazo a nuestro tutorial sobre Cómo quitar las flechas del campo Números.