Change Background Color Text Box

  • Profile Image
    EOTW
    Asked on November 30, 2017 at 07:45 PM

    I have a text box that I would like to change the background color on.  I read about injecting CSS into fields but that doesn't seem to apply because my textbox doesn't have a field ID.


    I clicked the text editing button that said 'background color' and nothing changed.

    Please advise how I can change the background color of a text box.


    thank you

  • Profile Image
    Marvih
    Answered on November 30, 2017 at 10:41 PM

    You can use "Inspect element" to know the ID of your text field.

    Go to your form URL https://www.jotform.com/50207433430139 go to the "Text" area, press the Right Click of your mouse and click "Inspect Element" or "Inspect" depending on the web browser you used.

    151209952652.gif

    On your form the ID of that text is "text_127". Now go to your Page Builder and insert a custom CSS code

    You can insert this code

    #text_127{

        background: gray !important;


    }

    151209969853.png

     

    Hope that helps.

  • Profile Image
    Richie_P
    Answered on December 01, 2017 at 03:05 PM

     Are you referring to this fields?

    The field ID's are #input_140_0 and #input_140_1 which can be found in Properties>ADVANCED>Field Details.

    use the code below to change the background.

    #input140_1,#input140_2{
      background-color: lightgray !important;
    }

    The Form Designer CSS window affects all the form, but some widgets are not affected with the global css.

    You need to place the css your injecting or code after the end bracket "}" to avoid getting errors.

    Here is a screen cast to explain further.

  • Profile Image
    EOTW
    Answered on December 01, 2017 at 03:46 PM

    I have put the code in exactly as you stated and it is not the same color gray as the text box above.  also is it possible to have less of a wide white stripe between the text box and the input field?  

  • Profile Image
    EOTW
    Answered on December 01, 2017 at 03:50 PM

    i think the text needs to be black, not grey.  and can there be more gray around the edges of the fields?

    and, i can't see the grey color background unless i preview form, while the grey in the text box is apparent even in the editing mode.

  • Profile Image
    Richie_P
    Answered on December 01, 2017 at 04:16 PM

     Here is a mock up of the css fields so you can change it with your preferred colors.

    The #id_140 is the container of the checkbox field, you can use "background-color" to change the background.

    label_input_140_0 is the css for the texts, you can change its color by using "color" and

    cid_140 is the container inside the checkbox,to change color you need to use "background-color".

  • Profile Image
    EOTW
    Answered on December 01, 2017 at 05:38 PM

    Never mind I got it!