Theming - How to change the login form background color?

Server
1

I can't see where is the field's background color (the one that looks light yellow)

I0ve been editing this value in Styles.css (inside my new theme) but it changes a color for a background of the objet that is below the text field.

/* General new input field look */

body-login input[type="text"],

body-login input[type="password"],

body-login input[type="email"] {

border: none;
font-weight: 300;
**background-color: #BB5314;**

}

2

Hiya! If I understand correctly, what you want to do is to change the login form's fields background color like this (I applied your css rules with the custom background color in styles.css and worked flawlessly)

fields.png467x540 60.7 KB

3

Thanks! Lets see if I can make this happen.

I want exactly what you show, and I've managed to get it that way, BUT, only after some text is entered. If I use my code, the background will show up in any color I want, but only after the placeholder light yellow one disappears when I enter some text.

Do you see the same? If you refresh the page, do you see the placeholder standard text and a light yellow background?

In the example, I've edited the username and it shows the White background I'm editing in the styles.css file. I haven't entered anything in the password field, and it remains yellow.

I want to change that colour, the one that is used before user's interaction with the field.

4

Happy to help!

So far, yes, I see the same background when refreshing so I have a couple of ideas of where this can come from:

  1. You have some more changes in the .css that override the background-color we are setting in the body-login css id.
  2. And most likely, If you are using google chrome, you are being a victim of its autofill issue that override the stylesheet when remembering the data in the forms from previous logins. Easy way to test this is deleting your OC's saved credentials in your chrome settings.
5

You idea gave me a solution: I was using Safari, and it shows the field with that light yellow. A new browser like Chrome or Firefox, shows the white one as I want.

So, solved with no exact reason :slight_smile:

Thanks a lot

JP

6

Awesome! You can check this StackOverflow answer to see some solutions to avoid this happening in browsers that autofill the form fields background color.

You are welcome! :wink: