Optimizing Material Design autofilled outlined textfields while retaining usability

Google Material Design is, among other things, a fine mechanism for quickly building engaging textfields. The outlined version has a little issue when it comes to autocomplete though; the autofill background color doesn’t fill the whole component. This document describes how to mitigate this problem by changing the html a wee bit & adding some using some user-agent specific css.

Quick solution: check the Codepen

Styling autofill

More than 2,5 million Google results for the query “input autocomplete background color” indicate that many developers have an issue with styling autocompleted inputs.

An often used solution is the remove the autofill color altogether by overpainting it with an inset box-shadow.

.mdc-text-field__input {
  box-shadow: inset 0 0 0 32px #fff;
}

Using this approach we could create a clean all white textfield. This is fine enough, but the textfield wouldn’t really adhere to usability standards.

Autofill color is here for a reason, namely to communicate that the user-agent knows something about the input which could prove beneficial to the user. This is why companies such as Netflix, Linkedin or Facebook respect user agent autofill coloring.

A simple solution

HTML

First, we have to place the input before the span with “mdc-notched-outline”. This way we can utilize tilde ~ for modifying underlying nodes if the input-parameters change.

<label class="mdc-text-field mdc-text-field--outlined">
    <input id="username" type="text" class="mdc-text-field__input" autocomplete="username" aria-labelledby="username-label">
    <span class="mdc-notched-outline">
        <span class="mdc-notched-outline__leading"></span>
        <span class="mdc-notched-outline__notch">
          <span class="mdc-floating-label" id="username-label">Username</span>
        </span>
        <span class="mdc-notched-outline__trailing"></span>
    </span>
</label>

CSS

We can now address the notched outline & alter it’s children. N.B. leading,- and trailing nodes are given an inset box-shadow instead of a background-color since a background-color for the trailing node would cover the input.

.mdc-text-field__input {
  &:-webkit-autofill {
    ~ .mdc-notched-outline {

      .mdc-notched-outline__leading,
      .mdc-notched-outline__trailing {
        box-shadow: -16px 0 0 0 inset rgb(232, 240, 254);
      }
    }
  }
}

The result will be:

We still have to compensate for the padding left of the notch to remove the white gutter. We can do this by giving the notch an inset box-shadow matching the width of the padding.

      .mdc-notched-outline__notch {
        box-shadow: 4px 0 0 0 inset rgb(232, 240, 254);
      }

Disco! textfields that fill up the whole component!

Then we have to differentiate user-agents. This is a thing, because the native autofill color for Chrome is lightblue, whereas Safari’s version is banana-yellow.

The full snippet would be:

.mdc-text-field__input {

  &:-webkit-autofill {
    ~ .mdc-notched-outline {

      .mdc-notched-outline__leading,
      .mdc-notched-outline__trailing {
        box-shadow: -16px 0 0 0 inset rgb(232, 240, 254);
      }
      .mdc-notched-outline__notch {
        box-shadow: 4px 0 0 0 inset rgb(232, 240, 254);
      }

      //safari
      @media not all and (min-resolution: .001dpcm) {
        @supports (-webkit-appearance:none) and (stroke-color:transparent) {

          .mdc-notched-outline__leading,
          .mdc-notched-outline__trailing {
            box-shadow: -16px 0 0 0 inset rgb(250, 255, 189);
          }
          .mdc-notched-outline__notch {
            box-shadow: 4px 0 0 0 inset rgb(250, 255, 189);
          }

        }
      }
    }
  }
}

Check out codepen for working demo

Caveats

If a user-agent changes it’s internal css for autofill, there could be mismatch between colors.

Happy coding!