Originally published at: http://www.sitepoint.com/theming-form-elements-sass/
Form inputs without a doubt encompass a sizable portion of the Web. Since form controls can and will be encountered by users daily, it only seems fitting to lend our attention to a few suspects by furnishing each one with Sass’ strength to help us theme our project’s input’s swiftly.
Placeholders
A placeholder is a hint to users as to what information can be entered within the corresponding control. It applies when the value of the type attribute is set as text, search, tel, url or email; otherwise it’s ignored. Unfortunately to style the placeholder requires the appropriate vendor prefixes associated with each pseudo required so authors can deliver coverage across the major browser vendors such as IE, Firefox, Safari, Chrome and Opera.
A Mixin Helper
This placeholder @mixin can be used within a variety of contexts such as applying it alone or combined with a selector of your choosing. I’ve also taken the liberty of constructing a Sass map that contains all the properties you’re allowed to style.
index.html
<label for="username">Name</label> <input type="text" name="username" id="username" placeholder="first, last"/>
_placeholder-mixin.scss
The @at-root directive used by these mixins works by switching context where the nested call in your Sass is placed and pulls the declaration to the top level of the selector chain.