How can I change the background of the answer in the Form Calculation Widget?

  • Profile Image
    hannahevans
    Asked on February 07, 2017 at 01:20 PM

    Hello,

    Is there anyway to change the answer box in the Form Calculation Widget to have a different colour and the text to be bold so that it stands out on the page?

    Thanks so much!

  • Profile Image
    Kiran
    Answered on February 07, 2017 at 02:32 PM

    You may find the field ID of the calculation widget and inject the CSS code as shown below to the form.

    Assuming input_76 is the field ID of the calculation widget, you may inject the following CSS code to the form.

    #input_76 {

    background-color: #cefcef;

    }

    You may find the color codes here and change the color as per your requirement.

    Hope this information helps! 

  • Profile Image
    Kiran
    Answered on February 07, 2017 at 02:35 PM

    Please add font-weight: bold; to the code in order to make the text bold. Here is the complete code that can be injected to the form.

    #input_76 {

    background-color: #cefcef;

    font-weight: bold;

    }

    Thanks!

  • Profile Image
    hannahevans
    Answered on February 07, 2017 at 02:56 PM

    Thank you so much - much appreciated!

  • Profile Image
    hannahevans
    Answered on February 21, 2017 at 11:52 AM

    Sorry to trouble you - are you able to advise how I would change the colour of the labels fro First Name, Date, Email Address etc.?

    I have tried:

    #first_12, #last_12{

       color: #0A12FA

    }

    or

    #first_12, #last_12{

       font-color: #0A12FA

    }

    or

    #day_13, #month_13, #year_13, #lite_mode_13{

      color: #0A12FA

    }

    I have also added:

    form-label-left, .form-label-right, .form-label-top {

        color : #0A12FA !important;

    which has changed the first question to the colour I want - but I can't get it to replicate on the other questions.

    Any advice would be much appreciated.

    Thank you in advance!

  • Profile Image
    Kevin_G
    Answered on February 21, 2017 at 01:01 PM

    In order to properly assist you I have moved your question to another thread, we will help you to resolve it here: https://www.jotform.com/answers/1072179