Line Checkbox custom CSS

  • Profile Image
    livro.ca
    Asked on November 26, 2017 at 12:10 AM

    Is there some CSS tool / helper I can use or somekind of editor?

    I want to modify the "Line Checkbox" CSS to do the following:

    Be green when selected and red when not selected. I want the widget width to be max 400px wide and the whole thing centered. I each line to be a bit bigger; by increasing the font size, or making it bold (or both).

    Can anyone help with the some sample CSS code so I can get started?

  • Profile Image
    livro.ca
    Answered on November 26, 2017 at 12:50 AM

    I tried this:

    li div {text-align: center; font-size: xx-large;}

    seems like text align works. No way to make the text bigger. also no particular idea how to make "unselected" red color and "selected" green color.

  • Profile Image
    BJoanna
    Answered on November 26, 2017 at 02:58 AM

    To change the fond size and to make the text bolder add this CSS code:

    li div {text-align: center; 

    font-size: 25px!important;

    font-weight: bold;

    }

    Add this CSS code to change the color of the items that are not selected to red:

    .icheckbox_line-green, .iradio_line-green {

        background: red;

    }

    The color of selected items is already green, but if you want to change it you can use this CSS code:

    .icheckbox_line-green.checked, .iradio_line-green.checked {

        background: add color here;

    }

    Add the CSS codes to the Custom CSS field of the widget. 

    When you add CSS code that I provided above the widget will look like this. 

    1511682671widget.JPG

    Here is my demo form: https://form.jotform.com/73291181770962 

    Feel free to test it and clone it

    If you also want to change the width of the widget you can do it inside of the filed properties.

    1511682839width.JPG 


    Hope this meet what you are looking for.

  • Profile Image
    livro.ca
    Answered on November 26, 2017 at 01:21 PM

    amazing, thank you.

    One detail; there seems to be a transition between checked and unchecked where the item becomes unchecked and a lighter green instead of red. This doesn't seem to happen on a PC but happens on mobile even after clearing my cache, see below screenshot;

    1511720482icheckbox.png

  • Profile Image
    John_Benson
    Answered on November 26, 2017 at 02:57 PM

    The light green color is when you hover an item effect. Here's a screen capture using PC:

    1511725882rhovesre.gif

    Do you want to change it to a different color? 

  • Profile Image
    livro.ca
    Answered on November 26, 2017 at 03:33 PM

    Hi John,

    ideally I’d like to disable it please

  • Profile Image
    John_Benson
    Answered on November 26, 2017 at 07:30 PM

    To remove the hover effect color, please add this custom CSS code to your form:

    .icheckbox_line-green.hover, .iradio_line-green.hover {

    background: none !important;

    }

    Here's a guide on how to add custom CSS code to widget: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets

    You can test the clone form on this link before making any changes: https://form.jotform.com/73297633328969

    I hope this helps. 

  • Profile Image
    livro.ca
    Answered on November 26, 2017 at 10:22 PM

     Hi John, I appreciate your help, Jotform is no doubt the best at what it does;

    The css you gave me doesn't have the desired effect, it shows white completely;

    1511752795image1.png

  • Profile Image
    livro.ca
    Answered on November 26, 2017 at 11:59 PM

    I've resolved this by disabling hovering effect. Thanks again!

  • Profile Image
    livro.ca
    Answered on December 19, 2017 at 02:50 PM

    Hey again,

    Sadly I can't get this to behave properly anymore!
    For some reason; it insists on showing a lighter shade of green when I deselect a preselected item. Can we just go from green to red and vice versa?

  • Profile Image
    BDAVID
    Answered on December 19, 2017 at 04:33 PM

    Please try injecting this code to remove the hover effect on your Line Checkbox widgets:

    div.icheckbox_line-green.checked:hover{

    background: green !important;

    }

    div.icheckbox_line-green:hover{

    background: red !important;

    }

    Please note that you will have to inject the code on each widget as shown on this guide: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets 

    Here is my test form: https://form.jotform.com/73525755426967 

  • Profile Image
    livro.ca
    Answered on March 04, 2018 at 11:06 PM

    Hi David or other Jotform staff;

    Sorry to reopen this, but any chance someone can access form # 73525755426967  then copy and paste the css used in the Line Checkbox widget referenced above? There should be more code than referenced by BDAVID, and I am unable to simulate 100% the same behavior as his form. Please, thank you in advance!

  • Profile Image
    BJoanna
    Answered on March 05, 2018 at 02:39 AM

    Here are the CSS codes:

    li div {text-align: center; 

    font-size: 25px!important;

    font-weight: bold;

    }

    .icheckbox_line-green, .iradio_line-green {

        background: red;

    }

    .icheckbox_line-green.checked, .iradio_line-green.checked {

        background: green;

    }

    .icheck_line-icon {

        align: center;

    }

    div.icheckbox_line-green.checked:hover{

    background: green !important;

    }

    div.icheckbox_line-green:hover{

    background: red !important;

    }