How to change the color of placeholder attribute text of input element?

The CSS3 Placeholder Pseudo-element

 

One of the features of HTML5 that was very quickly adapted by the developers around the globe and almost all the browsers developed since then, was “placeholder” attribute in input element. People stopped using javascript snippet in their code with onclick and onblur events.

Basically, placeholder attribute is used for displaying placeholder (informative) text in input fields, which fades away as soon as something is typed in the input box.

The placeholder-text is always faded (has opacity less than 1 = light in color) as compared to the original value text of input box. So, I was looking for a way to change the text-styling for the placeholder-text.

The latest ::input-placeholder CSS pseudo-element gives us a standards-compliant way to style placeholder text, regardless of an input field’s default styles. However most of the browsers have started to implement it but still it is preferred to use prefixed notations for each browser.

Example :

input {
	padding: 0px 15px;
	width: 300px;
	height: 30px;
	border: 1px solid #555;
	box-shadow: inset 1px 1px 1px 1px #000;
	border-radius: 5px;
	background: #666;
	font-size: 14px;
	color: #fff;
	text-shadow: 0px 1px 1px #000;
}
input::-webkit-input-placeholder {
	color: rgba(255,0,255,1); /* white color with alpha = 1 (alpha = opacity varies on a scale of 0 to 1 with decimal values in between) */
	text-transform: capitalize;
	font-size: 12px;
	font-style: italic;
	font-weight: normal;
	letter-spacing: 0.1em;
	line-height: 18px;
	padding: 0px 10px;
	text-align: left;
	text-decoration: underline;  /* blink property doesn't work in chrome right now */
}
input::-moz-placeholder {
	color: rgba(255,0,255,1);
	text-transform: capitalize;
	font-size: 12px;
	font-style: italic;
	font-weight: normal;
	letter-spacing: 0.1em;
	line-height: 25px;
	padding: 0px 10px;
	text-align: left;
	text-decoration: blink;
}
input:-moz-placeholder {   /* Older versions of Firefox */
	color: rgba(255,0,255,1);    /* alpha property doesn't properly work Firefox */
	text-transform: capitalize;
	font-size: 12px;
	font-style: italic;
	font-weight: normal;
	letter-spacing: 0.1em;
	line-height: 18px;
	padding: 0px 10px;
	text-align: left;
	text-decoration: blink;
}
input:-ms-input-placeholder { 
	color: rgba(255,0,255,1);
	text-transform: capitalize;
	font-size: 12px;
	font-style: italic;
	font-weight: normal;
	letter-spacing: 0.1em;
	line-height: 18px;
	padding: 0px 10px;
	text-align: left;
	text-decoration: blink;
}

Two Favorite CSS4 selectors – :not() and :matches()

In the CSS4 Specification it says :not() can be used for both selectors and pseudo classes. It will not work with:after or :before, but everything else works great. So lets say you want to apply to everything except links.

*|*:not(:link) {
/* Some CSS */
}

in the code snippet above, *|* is a general “apply to everything” rule. Basically it’ll apply the CSS to all the elements. But here css would be applied to all except the links.

So, the negation pseudo-class, :not(X), is a functional notation taking a selector list as an argument. It represents an element that is not represented by its argument.

NOTE: Negations may not be nested within itself or within :matches(). That means :not(:not(…)) and :matches(:not(…)) are invalid.

Pseudo-elements cannot be represented by the negation pseudo-class; they are not valid within :not().

Now coming over to :matches.

In this example, we condense three rules with identical declarations into one. Thus,

h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }

is equivalent to:

h1, h2, h3 { font-family: sans-serif }

The matches-any pseudo-class, :matches(X), is a functional notation taking a selector list as its argument. It represents an element that is represented by its argument.
In CSS4, only compound selectors are allowed within :matches(): combinators are not allowed. Additionally, :matches() may not be nested within itself or within :not(). :matches(:matches(…)) and :not(:matches(…)) are invalid.
Pseudo-elements cannot be represented by the matches-any pseudo-class; they are not valid within :matches().
Default namespace declarations do not affect the subject of any selector within a matches-any pseudo-class unless the argument is an explicit universal selector or a type selector.

For example, following selector matches any element that is being hovered or focused, regardless of its namespace. In particular, it is not limited to only matching elements in the default namespace that are being hovered or focused.

*|*:matches(:hover, :focus)

The following selector, however, represents only hovered or focused elements that are in the default namespace, because it uses an explicit universal selector within the :matches() notation:

*|*:matches(*:hover, *:focus)