Change input placeholder color

Change input placeholder colorIf you are wanted to change input placeholder color with CSS then you are at the right article. You can change placeholder text color and background color too with this technique which I’m going to share. There are several ways to implement the CSS. The most professional ways are. Don’t Miss: How To Set cellpadding and cellspacing in CSS

  • Inline CSS
  • Internal CSS
  • External CSS

By the above techniques, you can implement the CSS codes according to the W3C standards. There are three different implementations for the placeholder. pseudo-elements, pseudo-classes and nothing.

Don’t Miss: How To Proportionally CSS Scale Images

Some browser supports the pseudo-elements (::-webkit-input-placeholder) like Webkit,(safari, chrome, opera) and Microsoft edge.

Mozilla Firefox 4 to 18 are recommending the pseudo-classes (:-moz-placeholder) with one colon (:).

Mozilla Firefox 19+ recommending pseudo-elements (::-moz-placeholder) but you can also be used the old selectors they will work fine.

Internet Explorer 11 & 10 recommending the pseudo-class (:-ms-input-placeholder).

Internet Explorer 9 and the lower versions do not recommend the placeholder attribute on other hand opera 12 and older version also don’t recommend any CSS selector for placeholder.

Don’t Miss: Create CSS Transition Shorthand with Multiple Properties

We don’t get to the conclusion right now, it’s just be continued. Did you know pseudo-elements are real elements acting in the shadow DOM. Padding in an input will not generate the same background color as the pseudo-elements do.

Change input placeholder color with CSS

We need the user agents which will ignore any unknown selector rules. So we have to declare the separate rules for the separate browsers. 

Beware to eliminate the bad contracts. Firefox placeholder appears to default with a reduced opacity that’s why we have to use opacity:1.

You must know that placeholder text will get cut off if text size is not get fit in the input placeholder.

Those browsers which have HTML support for placeholder and without the CSS support for that are like opera should always be tested.

Don’t Miss: Create parallax scrolling Effect in HTML

Some browsers have their own default CSS attributes. Such as the Firefox and Safari, and for those you have to declare the separate codes for the same thing like the example code below.

By this, you can Change input placeholder color with CSS. Now you are awarded the separate codes for the separate browser.

SHARE