Change a HTML5 input s placeholder color with CSS

0 votes

On input[type=text] elements in Chrome, the placeholder property is supported (others probably do too).

However, the following CSS has no effect on the placeholder's value:

input[placeholder], [placeholder], *[placeholder] {
    color: red !important;
}
<input type="text" placeholder="Value">

However, Value will remain grey rather than red.

Is there a way to make the placeholder text a different colour?

Jun 9 in CSS by Edureka
• 10,120 points
40 views

1 answer to this question.

0 votes
There are three implementations available: pseudo-elements, pseudo-classes, and nothing.

A pseudo-element:::-webkit-input-placeholder is used by WebKit, Blink (Safari, Google Chrome, Opera 15+), and Microsoft Edge. [Ref] Mozilla Firefox 4–18 employs the pseudo-class::-moz-placeholder (one colon). [Ref] Mozilla Firefox 19+ employs a pseudo-element:::-moz-placeholder, but the previous selector will continue to function for the foreseeable future. [Ref]
In Internet Explorer 10 and 11, a pseudo-class::-ms-input-placeholder is used. [Ref]
April 2017: The simple pseudo-element::placeholder is supported by the majority of current browsers. [Ref]
Internet Explorer 9 and earlier do not support the placeholder attribute, and Opera 12 and earlier do not allow any CSS selector for placeholders.

The debate about the appropriate method of implementation is still ongoing. In the Shadow DOM, the pseudo-elements behave like real elements.
answered Jun 10 by Edureka
• 9,540 points

Related Questions In CSS

0 votes
1 answer

Making a dotted grid with CSS

You can use the background-position CSS property to do ...READ MORE

answered May 31 in CSS by Edureka
• 9,540 points
18 views
0 votes
1 answer

Change color of PNG image via CSS?

The simplest one line that worked for ...READ MORE

answered Jun 1 in CSS by Edureka
• 9,540 points
362 views
0 votes
1 answer

What is the proper way to display a logo with CSS?

An <img> element is the proper way ...READ MORE

answered Jun 10 in CSS by Edureka
• 9,540 points
31 views
0 votes
1 answer

Rails - how to integrate a form with bootstraps css?

Here is how I did it  in my ...READ MORE

answered Jun 28 in CSS by Edureka
• 9,540 points
17 views
0 votes
0 answers

Is there a way to change the color of the placeholder text?

I tried to change the placeholder color ...READ MORE

Jul 4 in HTML by Tejashwini
• 1,760 points
9 views
0 votes
2 answers

Define a SQL query? What is the difference between SELECT and UPDATE Query? How do you use SQL in SAS?

HI.. SQL is Structured Query Language, which is ...READ MORE

answered Aug 8, 2020 in PHP by anonymous
4,757 views
0 votes
1 answer

Using/Handling colon inside a JSF generated HTML element ID in CSS selector

Yes, you can.  Just Backslash (\) the colon.  Like ...READ MORE

answered Nov 14, 2018 in Others by DataKing99
• 8,240 points
1,704 views
0 votes
1 answer

What is a css selector and where is it used?

CSS Selector is a combination of element ...READ MORE

answered Nov 21, 2018 in Data Analytics by Kalgi
• 52,350 points
281 views
0 votes
1 answer

Is there any way to colorize a white PNG image with CSS only?

Filters can be used with -webkit-filter and ...READ MORE

answered May 27 in CSS by Edureka
• 9,540 points
82 views
0 votes
1 answer

How to build a special polygon (a kite shape) with HTML & CSS only?

I made two divs, one for Arc ...READ MORE

answered May 28 in CSS by Edureka
• 9,540 points
84 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP