-
stormingrobotsAsked on October 18, 2018 at 7:59 PM
I did:
.form-checkbox-item:not(#foo) label:before {
width : 15px !important;
height : 15px !important;
border-color:#851515!important;
color: #851515!important;
border-radius:3px!important;
-moz-box-shadow : 0 0 2px #ccc;
-webkit-box-shadow : 0 0 2px #ccc;
box-shadow : 0 2px 5px #ccc;
}
but the checkmark still remains as white.
Please advise.
https://www.jotform.com/82906715910156
-
Kevin Support Team LeadReplied on October 19, 2018 at 12:11 AM
Try using this code instead:
.form-checkbox-item:not(#foo) label:after {
background-color: #851515 !important;
box-shadow: 0 2px 0 0 #851515, 2px 2px 0 0 #851515, 4px 2px 0 0 #851515, 6px 2px 0 0 #851515;
}
Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes
Thanks.
-
stormingrobotsReplied on October 19, 2018 at 9:04 AM
O.. it the "after"... ! Thank you very much!
-
stormingrobotsReplied on October 23, 2019 at 4:11 PM
do you have any documentations showing me how to format the checkbox marker?
The left of the checkbox is simply too short. Can i make it look more like this:
-
Kevin Support Team LeadReplied on October 23, 2019 at 4:48 PM
There is not an specific documentation about how to format the element, basically, we do allow to inject CSS codes to format the form's elements, but CSS code knowledge is required to get the correct code and achieve what is wanted.
Now, inspecting the element using the developer tools, I found you may use the following to format the check box:
/*If you want to change the box/square*/
.form-checkbox-item:not(#foo) label:before{
}
/*If you want to change the mark itself*/
.form-checkbox-item:not(#foo) label:after{
}
You may use properties such as "margin" if you want to change the position. Here's also a link that will help you further customizing the check box elements with CSS codes: https://www.w3schools.com/howto/howto_css_custom_checkbox.asp
-
stormingrobotsReplied on October 23, 2019 at 5:13 PM
hmm... Please help me to fix it. I could not get the background as transparent in checkbox...
form: 92953910615158
-
VincentJayReplied on October 23, 2019 at 7:24 PM
Please add this custom CSS code to your form:
.form-checkbox-item:not(#foo) label:after {
box-shadow: none;
}
Please check the guide below on how to add custom CSS code to your form:
How-to-Inject-Custom-CSS-Codes
You can test my clone form before adding the CSS if you want. Here's the link: https://form.jotform.com/92957289357982
Thank you.