How to Create Custom Styles for Checkboxes/ Radio Buttons for Webforms
Customize the look of radio buttons, a custom code is needed.
Once the User has the code, click the Form/Styling button, copy and paste the code into the Custom CSS tab, and then click save.
For example, copying and pasting this custom code below in the Custom CSS tab made the radio buttons bigger in the image below:
/* custom CSS for radio buttons */
%FORM.HTML_ID% .radio > label {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
%FORM.HTML_ID% .radio > label input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
%FORM.HTML_ID% .radio > label .required {
position: absolute;
top: 0;
left: 0;
background-color: #ffffff;
border: solid 1px #868686;
font-size: 11px;
border-radius: 50%;
height: 25px;
width: 25px;
line-height: 25px;
}
%FORM.HTML_ID% .radio > label:hover input ~ .required {
background-color: #fefefe;
}
%FORM.HTML_ID% .radio > label input:checked ~ .required {
background: #eeeeee;
box-shadow: 0px 0px 0px 1px #eeeeee;
}
%FORM.HTML_ID% .radio > label .required:after {
display: none;
content: "";
top: 7px;
left: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #212326;
position: absolute;
}
%FORM.HTML_ID% .radio > label input:checked ~ .required:after {
display: block;
*Please Note: To see the changes the code made on the radio buttons, click on “Preview Form”
To create custom styles for checkboxes in Enquire MAP, select "Checkbox" from the content field. It should look like the image below:
