What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How to Change the Color of Specific Sublabel?

    Asked by mgcaledonian13 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

     

    style size name font
  • Profile Image
    JotForm Support

    Answered by mert 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

    Answered by mgcaledonian13 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
    JotForm Support

    Answered by Kevin_G 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

    Answered by mgcaledonian13 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
    JotForm Support

    Answered by EltonCris 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

    Answered by mgcaledonian13 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
    JotForm Support

    Answered by KadeJM 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

    Answered by mgcaledonian13 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
    JotForm Support

    Answered by Kevin_G 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.