Theming Form Elements with 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 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 Read the full article on SitePoint.

Dennis Gaebel

Design Technologist passionate for Open Source, SVG, Typography, Web Animation, Interaction Development & Pattern Based Design.

Leave a Reply

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

show formatting examples
<pre class="language-[markup | sass | css | php | javascript | ruby | clike | bash]"><code>
…code example goes here…

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comment Preview

  1. John Doe shouted this comment preview: