How to Create Custom Styles for Checkboxes/Radio Buttons for Webforms in Enquire MAP
- To create custom styles for radio buttons in Enquire MAP, select the Radio button from the content field. It should look like the image below:
- To customize the look of radio buttons, a custom code is needed. Once the User gets 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:
- To customize the look of checkboxes, a custom code is needed. Once the Users gets the code, click the Form/Styling button, copy and paste the code in the Custom CSS tab, and then click save.
For example, copying and pasting this custom code below in the Custom CSS tab made the checkboxes bigger in the image below.
/* Custom CSS for checkboxes */
%FORM.HTML_ID% .checkbox > 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% .checkbox > label input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
%FORM.HTML_ID% .checkbox > label .required {
position: absolute;
top: 0;
left: 0;
background-color: #ffffff;
border: solid 1px #868686;
font-size: 11px;
border-radius: 3px;
height: 25px;
width: 25px;
line-height: 25px;
}
%FORM.HTML_ID% .checkbox > label:hover input ~ .required {
background-color: #fefefe;
}
%FORM.HTML_ID% .checkbox > label input:checked ~ .required {
background: #eeeeee;
box-shadow: 0px 0px 0px 1px #eeeeee;
}
%FORM.HTML_ID% .checkbox > label .required:after {
display: none;
content: "";
left: 8px;
top: 4px;
width: 5px;
height: 10px;
border: solid #212326;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
}
%FORM.HTML_ID% .checkbox > label input:checked ~ .required:after {
display: block;
*Please Note: To see the changes the code made on the checkboxes, click on “Preview Form”
Please reach out to the dedicated Enquire Account Manager or Enquire MAP Support team for further assistance.