SCSS Mixin Autofill

A package for integrating a mixin for styling auto-completion of input fields.

Installation

You can install the package automatically using NPM:

npm i @m2collective/scss-mixin-autofill

Usage

To use the package, import it into your project:

@use "@m2collective/scss-mixin-autofill" as *;

Autofill

.demo {
    @include autofill((active, hover, focus)) {
        box-shadow: 0 0 0 9999px white inset !important;
        -webkit-text-fill-color: black !important;
    }
}

// Return

.demo:autofill{
    -webkit-text-fill-color: #000 !important;
    box-shadow: inset 0 0 0 9999px #fff !important
}

.demo:autofill:active{
    -webkit-text-fill-color: #000 !important;
    box-shadow: inset 0 0 0 9999px #fff !important
}

.demo:autofill:focus{
    -webkit-text-fill-color: #000 !important;
    box-shadow: inset 0 0 0 9999px #fff !important
}

.demo:autofill:hover{
    -webkit-text-fill-color:#000 !important;
    box-shadow: inset 0 0 0 9999px #fff !important
}

AutofillDisable

.demo {
    @include autofill-disable((active, hover, focus));
}

// Return

.demo:autofill{
    box-shadow: inset 0 0 0 9999px #fff !important
}

.demo:autofill:active{
    box-shadow: inset 0 0 0 9999px #fff !important
}

.demo:autofill:focus{
    box-shadow: inset 0 0 0 9999px #fff !important
}

.demo:autofill:hover{
    box-shadow: inset 0 0 0 9999px #fff !important
}

AutofillBackgroundColor

.demo {
    @include autofill-background-color(white, (active, hover, focus));
}

// Return

.demo:autofill{
    box-shadow: inset 0 0 0 9999px #fff !important
}

.demo:autofill:active{
    box-shadow: inset 0 0 0 9999px #fff !important
}

.demo:autofill:focus{
    box-shadow: inset 0 0 0 9999px #fff !important
}

.demo:autofill:hover{
    box-shadow: inset 0 0 0 9999px #fff !important
}

AutofillTextColor

.demo {
    @include autofill-text-color(black, (active, hover, focus));
}

// Return

.demo:autofill{
    -webkit-text-fill-color: #000 !important;
}

.demo:autofill:active{
    -webkit-text-fill-color: #000 !important;
}

.demo:autofill:focus{
    -webkit-text-fill-color: #000 !important;
}

.demo:autofill:hover{
    -webkit-text-fill-color: #000 !important;
}

Changing the namespace

You can change the namespace during mixin import and use the mixin with a different namespace:

@use "@m2collective/scss-mixin-autofill" as mixin;

License

The MIT License (MIT). Please see the License file for more information.