Placeholder State

placeholder.scss

/**
 * @alias placeholder-state
 * Styling placeholder text color states ( default, hover, focus )
 * USE: @include placholder( #999, #999, #222 );
 */
@mixin placeholder-state( $default: inherit, $hover: $default, $focus: $default ) {
	// You have to declare the -moz/-webkit separately in order for them to work
	&::-webkit-input-placeholder {
		color: $default;
	}

	&:-moz-placeholder {
		color: $default;
	}

	&:hover::-webkit-input-placeholder {
		color: $hover;
	}

	&:hover:-moz-placeholder {
		color: $hover;
	}

	&:focus::-webkit-input-placeholder {
		color: $focus;
	}

	&:focus:-moz-placeholder {
		color: $focus;
	}
}