Customizing Checkbox and Radio Fields to Look Like Buttons (All Forms)

.wpforms-container input[type=radio], 

.wpforms-container input[type=checkbox] {

 	position: absolute;

    opacity: 0;

    width: 1px;

    height: 1px;

    margin: -1px;

    padding: 0;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    border: 0;}

.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;

}

}