Setting form background color
-
Hi, I am not skilled in CSS but I try to follow examples.
I wanted to change the testimonial input form to match my page and tried
/* Sets testimonial input form background to match page */
.hms-testimonials-form {background:#FFE4B5;}but that did nothing. What I hope to accomplish is to set the background color and change the text color to black. Can you please provide an example of how to do that?
-
Are you trying to change the form background or the text field background colors? Can you post a link to your website and I will give you the CSS you need.
Sorry. site not yet active. First I wanted to change the background & text colors of the form then find an appropriate background and text color for the text fields.
Oh, and the class (?) for the border lines around the form and also the text fields.
I have had some success. I used the code below and it works for the left side of the form. How do I change the form background on the right side? Text fields are okay.
/* Sets testimonial input form background to match page */
.hms-testimonials-form .hms-testimonials-label {background:transparent;}/* Change label terxt color to black */
.hms-testimonials-form .hms-testimonials-label
{color:#000000}Well, tried the following and it did not work on the right side.
.hms-testimonials-form td {background:transparent;}
Neither did this
table .hms-testimonials-form {background:transparent;}
Success!!!
.hms-testimonials-form .hms-testimonials-label, td {background:transparent;}
this changes the background of the form to be transparent so the color of the pages will show through… better than changing the color of the form to match.
It also leaves the text field alone.
I don’t know why but the line borders around the and through the table also changed to black as I wanted.
Good enough.
Working on the text fields now… so far, no success. Trying to change the background and text color. This does not work: Any ideas?
.hms-testimonials-form .hms_testimonials_name .hms_testimonials_testimonial
{background:#E0C266;
color:#000000;}Some success! I tried styling only one field with
.hms-testimonials-form .hms_testimonials_name
{background:#E0C266; color:#000000;}and it was good until I put my cursor in the field to type something then the background changed to black and the text changed to a gray.
So how do I retain my desired colors when the cursor is in the field?
Correction… when I place the cursor in the field, the background changes to black and the text remains black so I cannot see what I am entering until I move the cursor elsewhere.
Tried using this focus selector but did not work; text field changed to black when selected. Ideas? Anyone?
.hms-testimonials-form .hms_testimonials_name input:focus {
background-color: #E0C266;
}Sorry man, super busy at work.
What about just setting the background on the input?
.hms-testimonials-form .hms_testimonials_name input { background-color: #E0C266; }Thanks but I am afraid that does nothing. Here is what I have and how it works. Two fields in the form – name & testimonial.
Before entering anything in the field both are perfect.
1) When I place the cursor in the testimonial field – perfect; correct background, correct text color.
2) When I place the cursor in the name field – the background changes to black and the text remains black. When I move cursor elsewhere, the background has the correct color and text is correct. If I put the cursor back in the field, it changes to black..hms-testimonials-form .hms_testimonials_name
{background:#E0C266;
color:#000000;}.hms-testimonials-form .hms_testimonials_testimonial
{background:#E0C266;
color:#000000;}Does not make any sense – same code different results.
Success… maybe..
First, I had to modify the CSS you provided Jeff and it worked with focus but without focus it went to black so I had to have two CSS entries:
.hms-testimonials-form .hms_testimonials_name
{background:#E0C266; color:#000000;}.hms-testimonials-form .hms_testimonials_name:focus
{background-color: #E0C266; color:#000000;}
—
now it works but oddly enough, the testimonial field did not need the same two entries. No focus CSS was needed. Any idea why?Finally – success!
1) Don’t know why the testimonial field does not need the focus rule. I suspect there is something different about the way that input is handled and it is buried in a php function. Since I know nothing about coding… I’m not going there. However, I added the focus rule just to be consistent and in case whatever anomaly exists in php is corrected or changed someday.
2) I learned that when naming a custom field that you should not use () as it causes problems. I created a custom email field and added (not displayed) to the field name then when I tried to use .hms_testimonials_cf_email_(not_shown) in the CSS it would not work so I changed it to hms_testimonials_cf_email-_not_shown and all is good.
The topic ‘Setting form background color’ is closed to new replies.