To create custom styles for radio buttons in Active Demand, select "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 you get the code, you need to 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;
*To see the changes the code made on the radio buttons, click on “Preview Form”
To create custom styles for checkboxes in Active Demand, 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 you get the code, you need to 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;
*To see the changes the code made on the checkboxes, click on “Preview Form”
Comments
Please sign in to leave a comment.