- EOTWAsked 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.
- MarvihAnswered 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.
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
background: gray !important;
Hope that helps.
- JotForm SupportRichie_PAnswered 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.
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.
- EOTWAnswered 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?
- EOTWAnswered 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.
- JotForm SupportRichie_PAnswered 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".
- EOTWAnswered on December 01, 2017 at 05:38 PM
Never mind I got it!