Help With Custom CSS

Hi,

On my form v, I have a check box widget (Futurico Checkbox) with custom CSS coding. I have placed the option in a small box with a background color and green text. 

    selected

Now when when the starters box is selected it turns green. I would like something similar for the label. I just cannot get the right syntax to address this element under this condition.

I would the background white and the label text green, #00ee00. 

I may also want the 'yes' to be transparent and no box until the select box is green.

This is my last attempt that failed.

label.checked
{
color: #55CC55 !important;
background-color: #00fff00 !important;

}

 best, Robert

Sublimental:

Here is my preferred view.

TNX, Robert

Dear Robert,

What it might help you is to find at the HTML document, and change following sub class of the "icheckbox_futurico_checked" like below :

<div class="icheckbox_futurico checked" style="position: relative;"><input type="checkbox" id="futurico-checkbox-0" name="iCheck" value="YES" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute;top: 0%;left: 0%;display: block;width: 100%;height: 100%;margin: 0px;padding: 0px;background: rgb(15, 234, 153);border: 0px;opacity: 0;"></ins></div>

Please have a look at the picture below, it shows where to find this part of code, and adjust R, G, B as you want. It might be something that you are looking actually for.



I hope it helped.


Kind regards,
Boris Milanovic

HELLO BORIS,

I apologize for not including the form number 80704754652964. 

I did look at the html using console and see what you show above. I think perhaps you believe my form is embedded, not so, in any case I wish it was. I am still not understanding what I should use to accomplish the task. 

The current custom code for the widget is show in the image.

.................................................

I have highlighted the piece that I am trying to add.

best, Robert

To achieve your requirements, please inject the custom CSS codes below to the custom CSS tab of the Futurico Checkbox widget in your form. — How-to-Inject-CSS-Codes-to-Widgets

ul#iCheckList li:first-child label {

    display: none;

}

.icheckbox_futurico.checked + label {

    display: inline-block !important;

}

Copy of your form — https://form.jotform.com/83086371679974

Please test it and let us know if you need any further assistance.

Hello, Works great, Thank you! ... best, Robert