How to Change the Color of Specific Sublabel?

  • Profile Image
    mgcaledonian13
    Asked on February 05, 2016 at 05:54 AM

    How do you change only one sublabel color 

    Have tried 

    .sublabel_53 {color: red;!important;} seems the most likely 

    #sublabel_53 {color: red;!important;} I would think totally wrong

    These do not  work 

     

     

    ID etc. #input_53  Name {repeatThe}

    Willy Scott

     

  • Profile Image
    mert
    Answered on February 05, 2016 at 08:55 AM

    Hi Willy,

    You can easily find the id of the desired item by using the browser's "Inspect mode" with pressing F12 key. Please, see the steps from the below:

     

    Also, you can see the results from the below:

     

    For further assistance, please do let us know.

    Thanks.

  • Profile Image
    mgcaledonian13
    Answered on February 05, 2016 at 05:41 PM

    I am sorry but I was not asking how to find the ID, I was asking basically what the syntax was to inject into the CSS in Form Styles.

    Can you give me this bit of info please?

    Willy Scott 

  • Profile Image
    Kevin_G
    Answered on February 05, 2016 at 07:30 PM

    This is the CSS code:

    #sublabel_53 {

     color: red !important;

    }

    You will use "#" instead of "." because you will use the ID of the element.

    This guide will help you to inject the CSS in your form: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes.

     

  • Profile Image
    mgcaledonian13
    Answered on February 06, 2016 at 01:50 AM

    Kevin_G

    Sorry to say that does not work either.

    Please see  https://form.jotform.com/60324494472961

    The above is a small Test Form "Title me" 

    I have injected your CSS into the Form Styles as instructed, there must be something missing.

    Willy Scott

  • Profile Image
    EltonCris
    Answered on February 06, 2016 at 02:54 AM

    There's no specific ID on some of the sub-labels. However, you can use its parent element IDs.

    You can use the following, any of the two will work.

    #id_11 .form-sub-label {

        color: red;

    }

    OR

    label[for="input_11"].form-sub-label{

    color: red;

    }

    So basically, you only have to replace the number ID e.g. 11 which you can find on the field properties (right click the field > edit properties) under ID.

    If you need further assistance, let us know.

    Thanks!

     

  • Profile Image
    mgcaledonian13
    Answered on February 06, 2016 at 08:02 AM

    EltonCris 

    Thanks for that CSS, works a treat.

    Why do I have to use the following to get the First and Last to do the same thing

    label[for="first_10"].form-sub-label{color: red;}

    label[for="last_10"].form-sub-label{color: blue;}

    Made these different colors just to see that the two CSS work Independently 

    Can this be combined into one line of CSS

    Tried this, but it does not work. It seemed logical but clearly that is not the answer.

    label[for="first_10,last_10"].form-sub-label{color: red;} 

    I am determined to master this "black art" !!!!

    See  https://form.jotform.com/60324494472961

     

    Willy Scott

  • Profile Image
    KadeJM
    Answered on February 06, 2016 at 05:38 PM

    The reason it's not working together is because those are 2 separate elements that are targeting the Labels for each and unfortunately they cannot be combined.

     

  • Profile Image
    mgcaledonian13
    Answered on February 06, 2016 at 06:01 PM

    KadeJM

    OK I can live with that no problem.

    Thanks to you and all the others involved in resolving my Sub Label CSS, it is very much appreciated.

    Willy Scott

  • Profile Image
    Kevin_G
    Answered on February 06, 2016 at 10:20 PM

    On behalf of all our colleagues, you're welcome Willy.

    Great to know your form looks like you want.

    If you need further assistance, do not hesitate to contact us, we will be glad to help you.