-
ClintlunaAsked on January 17, 2019 at 6:24 PM
on this form: https://www.jotform.com/build/82815789429171
On the second page I want to have just a regular checkbox where it says "I have read and agree with the above."
But it's changing it to look like all the other checkboxes (a blue blob) because I edited other checkboxes on this form.
Is there a way to get just this one checkbox to look like a regular checkbox while keeping all the other ones modified how they are? Any other solution?
Thanks!
-
Jed_CReplied on January 17, 2019 at 10:01 PM
Add a field ID (#id_159) in your form-checkbox-item CSS declaration.
ex.
Before:
.form-checkbox-item {
border : 1px solid #d5d5d5;
box-shadow : 0 2px 2px rgba(0,0,0,.1);
display : inline-block;
box-sizing : border-box;
position : relative;
overflow : hidden;
}
.form-checkbox-item input {
display : none;
}
.form-checkbox-item input:checked + label {
background : linear-gradient(to bottom, #B4F9F1 0%, #ebf5f3 100%);
}
.form-checkbox-item label {
display: inline-block;
overflow: hidden;
margin: 0px 0px 9px 0px;
position: relative;
width: 300px;
height: 40px;
font: 700 13px/40px Lato, sans-serif;
font-family: inherit;
text-align: center;
color: #999;
background: #ffff;
background: linear-gradient(to bottom, #fff 0%, #eee 100%);
cursor: pointer;
transform: translateZ(0);
-webkit-transform: translateZ(0);
border-radius: 10px;
border: 2px solid #21a6cf padding: px;
color: #ffffff;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, sans-serif;
font-size: 20px;
box-shadow: 8px 8px 5px grey;
background: #21a6cf;
}
.form-checkbox-item {
border: none !important;
box-shadow: none !important;
}
.form-checkbox-item input:checked + label {
background: #117fa0 !important;
}
After:
#id_159 .form-checkbox-item {
border : 1px solid #d5d5d5;
box-shadow : 0 2px 2px rgba(0,0,0,.1);
display : inline-block;
box-sizing : border-box;
position : relative;
overflow : hidden;
}
#id_159 .form-checkbox-item input {
display : none;
}
#id_159 .form-checkbox-item input:checked + label {
background : linear-gradient(to bottom, #B4F9F1 0%, #ebf5f3 100%);
}
#id_159 .form-checkbox-item label {
display: inline-block;
overflow: hidden;
margin: 0px 0px 9px 0px;
position: relative;
width: 300px;
height: 40px;
font: 700 13px/40px Lato, sans-serif;
font-family: inherit;
text-align: center;
color: #999;
background: #ffff;
background: linear-gradient(to bottom, #fff 0%, #eee 100%);
cursor: pointer;
transform: translateZ(0);
-webkit-transform: translateZ(0);
border-radius: 10px;
border: 2px solid #21a6cf padding: px;
color: #ffffff;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, sans-serif;
font-size: 20px;
box-shadow: 8px 8px 5px grey;
background: #21a6cf;
}
#id_159 .form-checkbox-item {
border: none !important;
box-shadow: none !important;
}
#id_159 .form-checkbox-item input:checked + label {
background: #117fa0 !important;
}
The highlighted in red is the one added so it will only target specific field and not all checkbox items.
You can check my sample form here https://form.jotform.com/90167863400960.
I hope that helps. Let us know if you have any questions or if you need further assistance.
-
ClintlunaReplied on January 19, 2019 at 9:11 PM
Thanks, worked great!