Help With Custom CSS

  • Profile Image
    AgilityAssoc.Canada
    Asked on November 05, 2018 at 11:01 AM

    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. 

    1541433103option2.png    selected1541433118option3.png

    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

  • Profile Image
    AgilityAssoc.Canada
    Answered on November 05, 2018 at 11:13 AM

    Sublimental:

    Here is my preferred view.

    1541434380option4.png

    TNX, Robert

  • Profile Image
    bmilanovic
    Answered on November 05, 2018 at 12:08 PM

    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.

    1541437716Thread1 reply.PNG

    I hope it helped.


    Kind regards,
    Boris Milanovic

  • Profile Image
    AgilityAssoc.Canada
    Answered on November 05, 2018 at 02:54 PM

    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.

    1541447614css-code.png.................................................

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

    best, Robert

  • Profile Image
    Mike_G
    Answered on November 05, 2018 at 05:00 PM

    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.

  • Profile Image
    AgilityAssoc.Canada
    Answered on November 05, 2018 at 09:31 PM

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