change background and text color of specific field

Hello @shoaib114

I don’t know if you want to change the background colors or the colors of the text of the input tags.

If you want to change the background color of the input tags in some fields, please, follow the instructions below:

1. Assign to these fields a custom class name, the class name you want. I’ll use: custom-background

Note: the class names are assigned to the fields through their attributes: “Add CSS Layout Keywords”

2. Define the new class name through the “Customize Form Design” attribute, in the “Form Settings” tab (https://cff.dwbooster.com/images/documentation/form-settings-tab.png). For example:

#fbuilder .custom-background input{background-color: green !important;}

Note: I’ve used the green color, but you can use the color you want.

Best regards.

Hello,
I want to change one input field box into another style like this line in the example picture(https://nimb.ws/K27kLM).
Note:
I want to change it in one form. I just take two different forms for example only.

also, the given code is not working for dropdown inputs? I tried it but it’s not working.

Hello @shoaib114

In the HTML standard, the DropDown fields don’t use INPUT tags, they use SELECT tags.

So, assuming you have assigned the class name: custom-fields to the fields, you can define the new class name as follows:

#fbuilder .custom-fields input[type="text"],
#fbuilder .custom-fields input[type="number"],
#fbuilder .custom-fields input[type="password"],
#fbuilder .custom-fields input[type="email"],
#fbuilder .custom-fields select,
#fbuilder .custom-fields textarea{
	background:transparent !important;
	border: 0 !important;
	border-bottom:1px solid #CFCFCF !important;
}

Please, for additional questions, indicate the URL to the page where the form is inserted to check the modifications you have applied the form.

Best regards.

Hello,
Thank you so much for your response. I can’t be able to get my answer. So here is a brief description of my task.
1:I want to change the fields (input, calculated, text) into the simple line not the box.
2:I want to change the drop-down field color.
Here is the link where I integrate the form (https://3percent.io/)
Here is screenshot with more explanation. I want to change the box into line (1 to 7) and field color. (https://nimb.ws/bt1A0q)
Waiting for your response.

Hello @shoaib114

I’ve responded about the modifications of DropDown fields in multiple of previous entries. Please, I need you to follow my instructions.

If you want to change the background color to only some DropDown fields in the form, assign to them a custom class name, for example: my-dropdown

Note: the class names are assigned to the fields through their attributes: “Add CSS Layout Keywords”

And then, define the new class through the “Customize Form Design” attribute in the “Form Settings” tab (https://cff.dwbooster.com/images/documentation/form-settings-tab.png). For example:

#fbuilder .my-dropdown select{background-color: #89bac7 !important;}

If you want to generate the answer into a text, for example, a paragraph, you should use an “HTML Content” field as auxiliary. This is possible with the result of the equations, but not the entry fields.

For example, insert an “HTML Content” field in the form with the text as its content, similar to:

<p>Hello <span class="field-a"></span>, you have entered the value <span class="field-b"></span>, and the result is <span class="field-c"></span></p>

Now, as part of the equation associated with the calculated field, you can populate the previous tags, as follows:

(function(){
var a = fieldname1, b = fieldname2, c = fieldname2*6;
jQuery('.field-a').html(a);
jQuery('.field-b').html(b);
jQuery('.field-c').html(c);

return c;
})()

Note: The texts, fields’ names, and the equation are hypothetical, only to describe the process.

Best regards.