How to Inject CSS Codes to Widgets

November 22, 2021

You know how to inject custom CSS codes to your form but did you know that Widgets have their own respective location for CSS code injection?

For any widget that you add, all you have to do is:

form-builder-configurable-list-widget-custom-css
  1. Open the Widget Settings by clicking the wand icon.
  2. Go to the Custom CSS tab and inject your codes.
  3. Then hit the Update Widget button to save your changes.

Note that this feature is only available in the Classic Form layout.
The Card Form layout doesn’t have a Custom CSS tab for the widgets.
Related guide: Cards or Classic: Which One Should I Use?

You may be wondering – “Why not just consolidate all of them in the CSS tab of the Form Designer?”, and you’re right, that would have been way better. But, the reason is leaning more towards security concerns. Since widgets reside in their own respective iFrames, they are also restricted by the same-origin policy.

The same-origin policy restricts how a document or script loaded from one origin can interact with a resource from another origin. It is a critical security mechanism for isolating potentially malicious documents.

That’s the reason why Widgets need to have their own option for CSS injection, and that’s our topic for this guide. We can’t cover all the widgets but the general idea should be the same for the rest.

Checklist Widget

form-builder-checklist-widget-custom-css

The following custom CSS codes will change the color of the font and remove the border of the Checklist Widget widget:

ul.checklist label {
    color: #008000;
}
ul.checklist, ul.checklist li {
    border: none;
}

Take Photo Widget

form-builder-take-photo-widget-custom-css

The following custom CSS codes will change the background color of the buttons of the Take Photo Widget:

#takePhoto, #take_photo, 
#retake_photo, .file_upload label{
    background-color: #008000!important;
}

Image Slider Widget

form-builder-image-slider-widget-custom-css

The following custom CSS codes will remove the Image Slider widget’s eye icon for the active image and change the overlay color:

.j-slider-footer-item-overlay {
    background-color: rgba(0, 128, 0, 0.5);
}
i.gg-eye-alt {
    display: none;
}

Now, with just those 3 example widgets above, I bet you already got a hang of it.

And that’s about it!

Was this guide helpful?
Contact Support:

Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:

Support Forum: https://www.jotform.com/answers/

Contact Jotform Support: https://www.jotform.com/contact/

Send Comment:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comments: