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.
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
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
@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.
<input type="text" name="username" id="username" placeholder="first, last"/>
@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.
Continue reading this article on SitePoint