How to change color of Text Fields on my form?

Recorded a video of my issue.  CAnt change background color of section.

http://screencast-o-matic.com/watch/cDQZqwjrF7

You were in wrong ID of the field, for example for 25% code field is like this:

So if you apply this CSS:

#id_60{

background: #C3ECF4;

}

#id_67{

 background: #C3ECF4;

}

It will change the color of those fields, Score 25%, Score 30% and Score 20$.

Hope it helps. If you need further assistance please let us know.

Thank you!

Well no.  It didnt work.  And when I go to revert to earlier  version today it broke my styling. I think I keep seeing the weakness and bugness in this form.  Unfortunately I am not a professional developer which this requires. 

How do I fix  my freaking form widths now.!!! 

Ok so i got the form reverted back and form fields fine. And those 2 fields are blue in the edit page but NOT in the preview page. What gives??

The CSS editor is quite an advance feature. 

I watched your video and there are the some confusion and problem that causes the error on styling. Here are some clarifications and recommendations:

1. When you wrap things in  /**/, this means you are commenting out that code. When you comment things, that will simply make the text inside "not functional", the purpose of commenting is to set comments or notes on a code or part of it. Example:

/*This will set field background to blue*/

#id_60{

background: #C3ECF4;

}

You can see on my above code that I have a text inside /**/, that simply means it's a comment. It's kind of a label to describe the code after it. 

Now if you comment out a CSS code, that will not make the code functional.

Example:

/*#id_60 {

background: #C3CF4;

*/

Above, you can see I wrapped the earlier code with /**/, this coverts the CSS code to a plain text, the web browser will not read this as a CSS.

When you see that the code is green, then that means it is commented out. 

2. Another problem is that the opening and closing comments.

The comment starts with: /*

And it should end with: */

If part of your code was not properly commented, meaning somewhere you did not add a */ to specify where it ends, it will convert all code below it to a plain comment. In your case, that's what happened. You copied and pasted code at the very end of the text area, but somewhere above it you forgot to end a comment, which converted your newly added codes to plain comments. 

To learn more about comments and CSS, I strongly advise checking these guides: 

Here's the general guide that you can refer to: http://www.w3schools.com/css/

Here's a good section to learn more about ID, class, comments and the structure of the CSS: http://www.w3schools.com/css/css_syntax.asp 

2. When clicking on a field in the Form Designer Tool under the CSS editor mode, what it does is it fetches the field ID or field class of the field. Now the HTML structure or the hierarchy of the field elements are many, not just the one you are seeing when clicking the field. There are two ways on how to select a field:

Method 1: If you select a field by single click (click only once) you'll get the class name. If you click once, you can see that the selection or the highlight in the Form Designer shows a lot, in my screenshot below, these means ALL of the selected fields share the same class name. Example, below the class name of all the section highlighted is ".form-line".

A class name is used to group things. Example, you want to style ALL the drop down fields, now JotForm uses a class name ".form-dropdown", using that class name, you can easily style or change ALL the drop down fields in your form.

Method 2: When you double click a field, that fetches the field ID of an element. A field ID is unique, meaning it can only be used on ONE field or element. Below, you can see I double clicked on the "Score! 30%..." that automatically fetches the field ID and added it in the CSS editor. The field ID of that specific field element is #id_67.

You can find the commonly used CSS class names in JotForm in this link: https://www.jotform.com/help/75-Customize-Your-Form-Using-Custom-CSS-Codes 

I went ahead and cloned your form, I cleaned up the CSS and recreated some broken styles and fixed some conflicts. You can check and clone my form here: https://www.jotformpro.com/form/62679192306967. To get a version of that form in your account, simply clone it by following this guide: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

I know this is quite a long explanation, but I hope it helps.

Thanks. Can you help me with this. I am not an expert. And now when I go into the design area it rips apart all my styling and reverts the fields back to a basic height and width. I have seen this happen before and if I save it, it will break all of my styling so I am stuck.

I just want those 4 html section in blue.

Thanks

I have checked your cloned version of my colleague's form and I can see the fields display different, they have not the same height nor width than your original form. 

Your original form: http://www.jotform.us/form/62388791050157 

Cloned version: http://www.jotform.us/form/62706177370154 

However, I have checked your cloned version and I can see there is still some commented code: 

My colleague's form has already the needed code to change the Text Fields background color that you want, you should find this code at the very bottom of the CSS code in your form: 

/*Background colors for score text element*/

#id_53 {

    background : #C3ECF4 !important;

}

#id_67 {

    background : #C3ECF4 !important;

}

#id_60 {

    background : #C3ECF4 !Important;

}

Please try cloning the form once again, also let us know if the form changes after making some change to your form, it will help us to identify if there is something affecting the injected code. 

We will wait for your response.