This post will just focus on the CSS3 implementation.
Controlling form styles through CSS
Controlling the style of an form input is done through a normal CSS property.
Like many CSS properties we need to prefix for the different browsers:
::-moz-placeholder //for newer versions of Firefox
Pay attention to the two prefixes used for the Mozilla implementation. Older Firefox versions require usage only one colon while newer versions require usage of two colons.
Putting the browser prefixes in a mixin
We can make our lives easier by putting this into a SASS mixin.
&::-moz-placeholder //for newer versions of Firefox
By prefixing the CSS properties we're extending the CSS class and calling them correcting when including them.
Now if we have our input element living inside one of our forms. We can call the placeholder with the @include.
border: 1px solid white
The will output the correct CSS to take control of the placeholder styling.