richardriman commented 4 years ago

I found a bug when you are on Webkit based browser and you use autofill feature, browser change background colors of inputs and this results into a graphical glitch as inputs in Elm-UI has paddings by default. Also, every webkit browser can use differrent color for this, for example Safari uses yellow. On attached screenshot is a Chrome.

Expected Behaviour

Elm-UI should eliminate this behavior by set also this autofill background OR should provide a way to set own autofill background color while use that custom color properly also on paddings, if it's possible.

Temporary Solution

Now you can workaround it only using zero paddings or you can add CSS styles to end of page body and set own color, e.g.:

...
  <style>
    /* webkit autofill fix */
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
      -webkit-box-shadow: 0 0 0 32px white inset !important;
    }
  </style>
</body>

Versions

Browsers: Tested in Chrome & Safari All browsers are at latest versions (Chrome 83.0.4103.116, Safari 13.1.1) Elm Version: 0.19.1 - latest Elm UI Version: 1.1.7 - latest

alexkorban commented 4 years ago

bug

anmolitor commented 2 years ago

Related: the white default on the input field can be overridden by passing an explicit Background.color attribute, but if you instead use css background-color directly (in my case to use css-variables for theming), the same behaviour can be observed. In this case there is no obvious workaround either :/

mdgriffith / elm-ui

Unable to change input autofill background #244

bug