Targeting input placeholder text with CSS

13th September 2016

Targeting input placeholder text with CSS is usually a vendor-prefix ridden mess of unreadable code. Like with many other aspects of CSS, Sass comes the rescue with this one.

This is a simple mixin that I've created for helping to deal with this.

@mixin targetPlaceholderText {
	&::-webkit-input-placeholder { @content; }
	&:-moz-placeholder { @content; } // Firefox 18-
	&::-moz-placeholder {  @content; } // Firefox 19+
	&:-ms-input-placeholder { @content; }
}

// Usage example:
input {
	@include targetPlaceholderText {
		color: #ff0000;
		// Any other standard text styles...
	}
}