1

I have custom text input CSS on my site, which causes the boxes to be all white when selected and grey when not in focus, as you can see here:

Here is my login form when the username box is selected. Notice the yellow highlight on the text field?

In the second picture, Google Chrome automatically fills in my username and password as I have it saved, and it highlights the inside of the box (not the border) a pale yellow. Is there some sort of CSS selector to override this event, or some better way to do it? Is there a way I can make my border highlight as well?

Flaxbeard
  • 501
  • 1
  • 5
  • 16
  • possible duplicate of [Override browser form-filling and input highlighting with HTML/CSS](http://stackoverflow.com/questions/2338102/override-browser-form-filling-and-input-highlighting-with-html-css) – Explosion Pills May 11 '13 at 14:06

1 Answers1

2

Try using background-color: white !important; which should override Chrome's autofill, unless Chrome is programmed to override everything, in which you can't do anything about it.

  • @flaxbeard not much you can do about it then. –  May 12 '13 at 09:00
  • Is there a way to make the border yellow when it auto highlights, then? – Flaxbeard May 13 '13 at 19:06
  • @flaxbeard you mean you want to make the border the same colour as the fill? If that's what you mean you could make other elements which act as a border since you can't use `!important` so they would have `position:absolute;` which act as a border (and a higher z-index). –  May 14 '13 at 18:31
  • @Flaxbeard BTW it would help if you said where your site was located then I could test it instead of mostly guessing. –  May 14 '13 at 18:38
  • @Flaxbeard wow your site is nice! Inspired by Windows 8, I'm guessing? –  May 15 '13 at 16:17
  • 1
    @Flaxbeard right, I thought the border was added by Chrome, but it wasn't. Just use `border:none;` in your code instead of having a border, and add `padding:2px;` (the width of the border). You've got it because it's the same colour as the BG when Chrome hasn't autofilled, so it's not needed. Just ask if you need help. –  May 15 '13 at 16:32
  • Thanks for the compliment! The site is actually more of a test of programming skill, but I was going for a really authentic, pleasing Windows 8 look. Thanks for the fix, it works! I'll mark this post as an answer. – Flaxbeard May 15 '13 at 19:26