Blog for web designers

Placeholder mixin sass

Easy placeholder mixin sass

Easy placeholder mixin sass that can save you alot of time. Placeholder are the HTML5 attribute for the input elements. However to style with css its horrible repeating the same css over again and again. Sass provide an easy platform to do not repeat css and make your work more convenient and easy. Below placeholder mixin sass code, you will just need to copy it into your sass/scss file and compile it via command line or any premium tool or any tool you are easy with.

This is a css method of using placeholder style for multiple browsers.


input::-webkit-input-placeholder { color: red; } input:-moz-placeholder { color: red; } /* Firefox 18- */ input::-moz-placeholder { color: red; }/* Firefox 19+ */ input:-ms-input-placeholder { color: red; }

Today I would like to show you a sass method of using placeholder where you only have to type the style once.


@mixin placeholder {
  &::-webkit-input-placeholder {@content}
  &:-moz-placeholder           {@content}
  &::-moz-placeholder          {@content}
  &:-ms-input-placeholder      {@content}  

input { @include placeholder {
    color: red;

Santosh Shah

My name is Santosh Shah and blogs at

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.