Question 100549 in CSS Question posted in
Some basic documentation can be found here.

Css – Visual bug when input is autofilled

I have an html form with a bunch of inputs. When an input gets autofilled by Safari and I then attempt to edit the input there is a weird overlapping of the string.

enter image description here

If I click around it seems to fix itself, but it’s not after the first click or when I simply focus on another input. I will attach the styles affecting my inputs. Not sure if this is my error or a bug in Safari, but it doesn’t seem to happen on other input fields…

input:is([type="text"],[type="number"],[type="email"],[type="tel"],[type="url"],[type="date"]),select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 0;
    background-color: #ffffff;
    margin: 0;
    max-width: 100%;
    max-height: 2.75em;
    border: var(--approx-1px) solid var(--color-gray);
    border-radius: 0;
    padding: var(--spacing-default);
    color: var(--color-darkblue);
    font-size: 1em;
    font-family: inherit;
    text-align: center;
    text-align-last: center;
    display: inline-block;
    vertical-align: middle;
    position: relative;
}
:is(input,select):is(:hover,:focus) {
    border-color: var(--color-darkblue);
    outline: transparent;
}

Thanks for any ideas.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    So after a bit of investigation I discovered the issue lied when the ::-webkit-contacts-auto-fill-button appeared, it would push the input to the left and cause a graphical glitch. Well I didn't know we could target that pseudo element, but you can. Setting it to position: absolute; and scooting it over with right: /* padding being used on the input */ ; lets it "float" above the input field taking out of the flow, preventing the graphical glitch. Hope this helps someone else.


  2. 0 
    input:-webkit-autofill, 
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
input:-webkit-autofill:focus {
    -webkit-box-shadow: inset 0 0 0px 9999px white;
}

    This will add a white background to the input fields when they are autofilled, which may prevent the overlapping text issue. You can adjust the colors as per need.

    I’m not that friendly with Safari so I just gave one suggestion.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search