Line Checkbox custom CSS

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?

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.

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. 

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.

Hope this meet what you are looking for.

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;

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

Do you want to change it to a different color? 

Hi John,

ideally I’d like to disable it please

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. 

 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;

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

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?

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 

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!

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;

}