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

    What is the custom CSS code to change the color of rating scale numbers for specific fields?

    Asked by strategicdifferences on March 25, 2014 at 10:21 PM

    I've got a lot of rating scales in my form and I've injected CSS to make the 'worst' and 'best' lables transparent for all, but for some I want it to show. What is the relevant code. If I add it just for specific elements will there be a conflict with this code  .form-scale-table{color: transparent;font-size: 12px;font-weight: bold;} which relates to whole form?

     

    thanks

    css code size table font Injected CSS
  • Profile Image
    JotForm Support

    Answered by ashwin_d on March 26, 2014 at 02:21 AM

    Hello,

    Yes if you inject the custom css ".form-scale-table{color: transparent;font-size: 12px;font-weight: bold;} ", it will be applied to all the rating scale you have in your form.

    It is possible to achieve your requirement by wrapping the text of only those rating scale which you want to make transparent. Please take a look at the following cloned form and see if this is what you are trying to achieve:  http://form.jotformpro.com/form/40840801872958?

    In this form, I have only made the rating scale as transparent and rest of them are visible. Here are the steps to achieve your requirement:

    1. Wrap the text/label of rating scale in <em> .. </em> which you want to show as transparent. Please check the attached screenshot on how to achieve this:

     

    2. Inject the following cusotm css in your form:

    em{color:transparent;}

    The following guide should help you in custom css injection:  https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

     

    3. Also, you need to remove the below mentioned cusotm css from your form:

    .form-scale-table{color: transparent;font-size: 12px;font-weight: bold;}

    This will actually hide all the rating scale label from your form.
    Hope this helps.
    Do get back to us if you have any questions.
    Thank you!