webkit-autofill

webkit-autofill

A simple scss file with mixins to styling autofill. More info about autofill in WebKit browsers: CSS-Tricks

Install

In your project install a package:

npm install webkit-autofill

Usage

First, import autofill.scss file from node_modules to your .scss / .sass file in project. For example:

@import '../../node_modules/webkit-autofill/autofill'

Then you can use mixins from autofill.scss. For example:

input:-webkit-autofill {
  @include backgroundColorAutoFill(#2196F3);
}

Examples (examples for .scss files)

A default style for autofill in Chrome with examples login data:

disableAutoFill

input:-webkit-autofill {
  @include disableAutoFill;
}

backgroundColorAutoFill(color)

input:-webkit-autofill {
  ...
  @include backgroundColorAutoFill(#2196F3);
}

textColorAutoFill(color)

input:-webkit-autofill {
  ...
  @include textColorAutoFill(#FFFFFF);
}

hoverBackgroundColorAutoFill(color)

input:-webkit-autofill {
  ...
  @include hoverBackgroundColorAutoFill(#FF5722);
}

hoverTextColorAutoFill(color)

input:-webkit-autofill {
  ...
  @include hoverTextColorAutoFill(#212121);
}