CODEWITHSUNDEEP
htmlcssgoogle-chromeautofill
Ketselyn Leffley
Ketselyn Leffley

Reputation: 11

Chrome's Autofill Leaves Greyish Corners on Rounded Input Fields

Let's say someone is working on a web site that allows users to create a profile. This designer really likes the way input fields look with rounded corners, but Chrome's autofill feature is doing something odd to them. Of course, they could take the easy way out and remove the border-radius definition, therefore avoiding the weird corners, but then the site wouldn't have the look they were hoping for.

Here are before-and-after images of what the fields would look like when autofill is used.

And here's a JSFiddle for anyone that would like to play around with it.

If helpful, here is the relevant code being used to modify the fields:

.field {
    background-color: #202020;
    border: 1px solid #000;
    border-radius: 4px;
    box-shadow: 0 0 5px #000;
    color: #d8d8d8;
}

input:-webkit-autofill {
    box-shadow: 0 0 0 100px #202020 inset, 0 0 5px #000;
    -webkit-text-fill-color: #d8d8d8;
}

Several attempts were made to find the culprit behind this problem, including removing the outer shadow from both definitions, as well as changing the inner shadow's position and blur radius. The greyish corners were still there. The only real "solution" was to revert to square corners, but that option is being reserved as a last resort.

After numerous searches for a solution to this issue, all that could be found were ways to circumvent the default pale yellow background. And that's great news, but the designer is still left with those ugly corners. Is there a way to get rid of them entirely and maintain the field's original style? or is it a glitch that has no work-around?

Thank you for any insight or help you can provide.

Upvotes: 1

Views: 1582

Answers (6)

Daniil Chistyakov
Daniil Chistyakov

Reputation: 1

This can help you to avoid these annoying borders:

.field {
  -webkit-box-shadow: inset 0 0 0 30px #2E2E2E !important;
  background-clip: content-box !important;
}

Upvotes: 0

cogito
cogito

Reputation: 81

I fixed the problem by adding this to my css:

@media (prefers-color-scheme: dark) {
  [data-theme*=dark] {
    color-scheme: dark;
  }
}

Upvotes: 0

John Miller
John Miller

Reputation: 407

Kreven's solution, while not the most elegant line of code, will definitely get the job done for most people I reckon. However, I'd like to modify it a bit and explain why it even works in the first place. Let's take a look at this line of code:

transition: background-color 2147483647s;

Here is a transition that would take 68.24 years to complete. Looks silly, right? If you're wondering where that magic number came from (2147483647), this is the maximum size of an integer, and thus the maximum duration for a CSS transition. What this transition is doing is making it take 64 years for your browser's autofill implementation to change the background color of your input.

It's also worth noting that this cheap trick will negate the need for you to use the "-webkit-box-shadow" CSS command (unless, of course, you need the autofill background-color to be different than the non-autofill background-color).

Hope this helps somebody! Cheers.

Upvotes: 3

Kreven
Kreven

Reputation: 36

add transition to background-color with high animation time to the .field element

.field {
  ...
  transition: background-color 5000s;
}

solutuion found here

demo on codepen

Upvotes: 0

tomcrabb
tomcrabb

Reputation: 11

I found that increasing the border width and making it the same colour as the input background seems to help. Then reduce the padding to achieve the same height:

https://jsfiddle.net/Lguucatv/1/

border: 4px solid #202020;
padding: 1px;

Also modified the box-shadow to match original design:

box-shadow: 0 0 0 1px #000, 0 0 5px 1px #000;

Upvotes: 1

Fiido93
Fiido93

Reputation: 1978

Is there a way to get rid of them entirely and maintain the field's original style?

Here is the css

body {
  background-color: #282828;
}

.field {
    background-color: #202020;
    border: 1px solid #000;
    color: #d8d8d8;
  margin: 100px;   /* adding space around it to  */
  padding: 5px;   /* make it easier to see      */
}

input:-webkit-autofill {
    box-shadow: 0 0 0 100px #202020 inset, 0 0 5px #000;
    -webkit-text-fill-color: #d8d8d8;
}

DEMO

Upvotes: 0

Related Questions