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
• 8,060 points
16 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
13 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
35 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
20 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 5 days ago in CSS by Edureka
• 9,540 points
6 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,500 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,654 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
267 views
0 votes
1 answer

What is the difference between span and div?

The div should be used to wrap sections of ...READ MORE

answered Jan 16, 2020 in Web Development by Niraj

edited Jan 21, 2020 by Niroj 2,251 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
30 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
28 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