Sass mixins for placeholder styles

in code


It took me like twenty minutes to figure the correct way to do this, so it’s worth a mention. I need to change the colour of unfilled or incomplete inputs in a form, including the placeholder style. Different browsers each have their own ways of handling placeholder styles.

@mixin placeholder_style() {
    &::-webkit-input-placeholder {
       @content;
    }

    &::-webkit-input-placeholder {
        @content;
    }

    &:-moz-placeholder {
        @content;
        opacity: 1;
    }

    &::-moz-placeholder {
        @content;
        opacity: 1;
    }

    &:-ms-input-placeholder {
        @content;
    }
}

Use it thusly:

input[class=unfilled] {
    background: #ed8787;
    color: #fff;

    @include placeholder_style() {
        color: #fff;
    }
}

It works for <textarea> blocks too!



Decompression

in me


Your email address will not be published. Required fields are marked *