Input Autofill Caret Missing

Question

The caret (blinking text input cursor thing) is missing when the form uses autocomplete.

When you click into the input field there is no caret. Once you add or remove a character from the field the autocomplete styling goes away and the cursor comes back.

There are a lot of questions and answers about removing the blue background color in autofilled forms, but I haven't found any good answers about the caret. Is there a way to get the caret to show up?

For context. I'm using Bootstrap 3.3.7 if that effects anything.

Grundyism

Did you manage to solve this? – Hemphill

@FilipNilsson Unfortunately I haven't found a solution for this yet. – Grundyism

This still happens in Chrome 107 on Mac. Maybe it is intended behaviour? – Chrotoem

Answer 1

You can try setting a caret-color to autofilled input

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
   caret-color: #fff;
}

Feigin

Answer 2

don't use id="email"

<input type="text" class="form-control" autocomplete="new-password" id="LoginUser" />

Shrader

Answer 3

I has a vue project with similar issue. The only workaround that helped is to reset autofill styles by changing input value itself and returning it back to initial.

const updateField = (field: Ref<string>) => {
    const temp = field.value

    // eslint-disable-next-line no-param-reassign
    field.value = field.value.slice(1)

    nextTick(() => {
      // eslint-disable-next-line no-param-reassign
      field.value = temp
    })
  }

 
  onMounted(() => {
    WindowHelper.window.setTimeout(() => {
      updateField(email)
      updateField(password)
    }, 300)
  })

Tetrafluoroethylene