How can I edit the CSS of the Minimal Checkbox widget?

  • Profile Image
    kmccann7
    Asked on April 04, 2019 at 11:56 AM

    Hello, 

    I am using the minimal checkbox widget and I'm trying to edit the styles of the widget. The custom css tab for the widget is not allowing me to apply any styles for some reason and its extremely finicky. Would you be able to give me an example of the structure on how to target the text and change its font size?  I've attached a screenshot of the css tab I am working with.

    Screenshot
  • Profile Image
    roneet
    Answered on April 04, 2019 at 01:35 PM

    May we know which Form are you referring to so that we could guide you injecting the CSS code in the widget's CSS tab.

    Let us know if you have further questions.

    Thanks.

  • Profile Image
    kmccann7
    Answered on April 04, 2019 at 02:25 PM

     Hi! The form is https://www.jotform.com/build/90636049498267 - thanks!

  • Profile Image
    Mike_G
    Answered on April 04, 2019 at 04:38 PM

    Thank you for that information.

    If you want to change the height of the text of the Minimal Checkbox widget option, you may inject the following CSS codes in the widget's Custom CSS tab

    label {

        color: green !important;

    }

    You may update the value of the color property in the codes to your preference.

    If you are planning to increase the size of the text that it would take 2 lines, you may need to also increase the height of the widget. To do that, please inject the CSS codes below to your form (not the widget) — How-to-Inject-Custom-CSS-Codes

    Below are the codes that you will be needing to increase the height of the widget itself. And similar to the codes above, you may update the value of the height property in the codes below to your preference.

    iframe[src*="icheck/?inputType=checkbox&skin=minimal"] {

        height: 100px !important;

    }


    I hope this helps. If you have other questions or concerns, please do not hesitate to let us know.