https://github.com/irekrog/webkit-autofill

Sass mixins to webkit autofill styling
https://github.com/irekrog/webkit-autofill

Last synced: 3 months ago
JSON representation

Sass mixins to webkit autofill styling

• Host: GitHub
• URL: https://github.com/irekrog/webkit-autofill
• Owner: irekrog
• License: mit
• Created: 2016-09-11T10:06:20.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2016-09-12T08:38:17.000Z (almost 9 years ago)
• Last Synced: 2025-04-03T03:39:11.458Z (3 months ago)
• Language: CSS
• Homepage:
• Size: 1.95 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# webkit-autofill

A simple scss file with mixins to styling autofill. More info about autofill in WebKit browsers: [CSS-Tricks](https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/)

## 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:

![Default style](http://irekrog.pl/files/images/default.png)

### disableAutoFill

![Default style](http://irekrog.pl/files/images/disableAutoFill.png)

```

input:-webkit-autofill {

  @include disableAutoFill;

}

```

### backgroundColorAutoFill(color)

![Default style](http://irekrog.pl/files/images/backgroundColor.png)

```

input:-webkit-autofill {

  ...

  @include backgroundColorAutoFill(#2196F3);

}

```

### textColorAutoFill(color)

![Default style](http://irekrog.pl/files/images/textColor.png)

```

input:-webkit-autofill {

  ...

  @include textColorAutoFill(#FFFFFF);

}

```

### hoverBackgroundColorAutoFill(color)

![Default style](http://irekrog.pl/files/images/hoverBackground.png)

```

input:-webkit-autofill {

  ...

  @include hoverBackgroundColorAutoFill(#FF5722);

}

```

### hoverTextColorAutoFill(color)

![Default style](http://irekrog.pl/files/images/hoverTextColor.png)

```

input:-webkit-autofill {

  ...

  @include hoverTextColorAutoFill(#212121);

}

```