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, 2022 in CSS by Edureka
• 13,620 points
494 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, 2022 by Edureka
• 12,690 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, 2022 in CSS by Edureka
• 12,690 points
1,529 views
0 votes
1 answer

Change color of PNG image via CSS?

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

answered Jun 1, 2022 in CSS by Edureka
• 12,690 points
5,808 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, 2022 in CSS by Edureka
• 12,690 points
526 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, 2022 in CSS by Edureka
• 12,690 points
962 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, 2022 in HTML by Tejashwini
• 3,820 points
230 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
9,616 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
2,545 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,360 points
682 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, 2022 in CSS by Edureka
• 12,690 points
1,507 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, 2022 in CSS by Edureka
• 12,690 points
1,133 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP