Change an HTML input's placeholder color with CSS

Question

Chrome v4 supports the placeholder attribute on input[type=text] elements (others probably do too).

However, the following CSS doesn't do anything to the placeholder's value:

input[placeholder], [placeholder], *[placeholder] {
    color: red !important;
}

<input type="text" placeholder="Value">

Value will still remain grey instead of red.

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

Quick heads-up (not a solution, just a FYI): if I recall correctly, input[placeholder] just matches tags that have a placeholder attribute, it doesn't match the placeholder attribute itself. — pinkgothic, Apr 09 '10 at 19:58
@MathiasBynens _The :placeholder-shown pseudo-class matches an input element that is showing such placeholder text._ So it matches `` tag, like `input` selector, but showing placeholder text just now. It also doesn't match the placeholder attribute itself. — HEX, Jan 18 '16 at 12:55
@HEX It’s not like the `input` selector because that selects all `input` elements. `:placeholder-shown` only selects `input` elements that are currently showing the placeholder, allowing you to style those elements only, and effectively style the placeholder text. What are you trying to say? — Mathias Bynens, Jan 19 '16 at 14:19
@HEX (Of course, it also selected `textarea` elements that are showing placeholder text.) — Mathias Bynens, Jan 21 '16 at 10:18
I can see no problem here ... The placeholder's text color is now red. Maybe other modern browsers now support it. — Lloyd Dominic, May 24 '17 at 05:28
Since this is a **hot topic**, I came up with another approach, to [___simulate a placeholder___](https://stackoverflow.com/questions/44333727/simulation-of-a-placeholder/44333787#44333787), which might be of interest — Asons, Jun 02 '17 at 18:30

score 5117 · Accepted Answer · edited Jul 05 '22 at 12:41

Implementation

There are three different implementations: pseudo-elements, pseudo-classes, and nothing.

WebKit, Blink (Safari, Google Chrome, Opera 15+) and Microsoft Edge are using a pseudo-element: ::-webkit-input-placeholder. ^[Ref]
Mozilla Firefox 4 to 18 is using a pseudo-class: :-moz-placeholder (one colon). ^[Ref]
Mozilla Firefox 19+ is using a pseudo-element: ::-moz-placeholder, but the old selector will still work for a while. ^[Ref]
Internet Explorer 10 and 11 are using a pseudo-class: :-ms-input-placeholder. ^[Ref]
April 2017: Most modern browsers support the simple pseudo-element ::placeholder ^[Ref]

Internet Explorer 9 and lower does not support the placeholder attribute at all, while Opera 12 and lower do not support any CSS selector for placeholders.

The discussion about the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM. A padding on an input will not get the same background color as the pseudo-element.

CSS selectors

User agents are required to ignore a rule with an unknown selector. See Selectors Level 3:

a group of selectors containing an invalid selector is invalid.

So we need separate rules for each browser. Otherwise the whole group would be ignored by all browsers.

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #909;
}

::placeholder { /* Most modern browsers support this now. */
   color:    #909;
}

<input placeholder="Stack Snippets are awesome!">

Usage notes

Be careful to avoid bad contrasts. Firefox's placeholder appears to be defaulting with a reduced opacity, so needs to use opacity: 1 here.
Note that placeholder text is just cut off if it doesn’t fit – size your input elements in em and test them with big minimum font size settings. Don’t forget translations: some languages need more room for the same word.
Browsers with HTML support for placeholder but without CSS support for that (like Opera) should be tested too.
Placeholders are no replacement for labels, so make sure you have a label, too
Some browsers use additional default CSS for some input types (email, search). These might affect the rendering in unexpected ways. Use the properties -webkit-appearance and -moz-appearance to change that. Example:

    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

This answer could probably do with a revision to reflect the state of things, since the content and versions covered have not really been updated in 6 years, and vendors have largely stabilized in that time (not to mention IE is essentially not a thing anymore). If you want to do this, that would be great, although I don't mind doing it if you're OK with that. — TylerH, Apr 18 '23 at 16:28
Check these references :[link](https://www.w3.org/TR/CSS21/selector.html%23id-selectors), [link](https://web.dev/learn/css/selectors/) — Faegheh Mohammadian, Aug 16 '23 at 06:22

score 791 · Answer 2 · edited Jul 19 '18 at 15:14

/* do not group these rules */
*::-webkit-input-placeholder {
    color: red;
}
*:-moz-placeholder {
    /* FF 4-18 */
    color: red;
    opacity: 1;
}
*::-moz-placeholder {
    /* FF 19+ */
    color: red;
    opacity: 1;
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color: red;
}
*::-ms-input-placeholder {
    /* Microsoft Edge */
    color: red;
}
*::placeholder {
    /* modern browser */
    color: red;
}

<input placeholder="hello"/> <br />
<textarea placeholder="hello"></textarea>

This will style all input and textarea placeholders.

Important Note: Do not group these rules. Instead, make a separate rule for every selector (one invalid selector in a group makes the whole group invalid).

score 319 · Answer 3 · edited Dec 14 '21 at 13:37

319

You may also want to style textareas:

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #FF9900;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #FF9900;
}

<textarea rows="4" cols="50" placeholder="Stack Snippets are nice!">
</textarea>

edited Dec 14 '21 at 13:37

Lars Flieger

2,421
1
12
34

answered May 11 '11 at 01:52

Matt

2,140
3
16
19

score 124 · Answer 4 · edited Sep 24 '16 at 07:52

124

For Bootstrap and Less users, there is a mixin .placeholder:

// Placeholder text
// -------------------------
.placeholder(@color: @placeholderText) {
  &:-moz-placeholder {
    color: @color;
  }
  &:-ms-input-placeholder {
    color: @color;
  }
  &::-webkit-input-placeholder {
    color: @color;
  }
}

edited Sep 24 '16 at 07:52

Peter Mortensen

30,738
21
105
131

answered Jun 06 '13 at 08:47

EIIPII

1,791
1
17
10

[For changing Bootstrap CSS](https://stackoverflow.com/a/57063996/10753968) – half of a glazier Dec 16 '20 at 12:10

ajcw · Answer 5 · 2013-09-25T13:04:08.947

114

In addition to toscho's answer I've noticed some webkit inconsistencies between Chrome 9-10 and Safari 5 with the CSS properties supported that are worth noting.

Specifically Chrome 9 and 10 do not support background-color, border, text-decoration and text-transform when styling the placeholder.

The full cross-browser comparison is here.

edited Sep 25 '13 at 13:04

answered Feb 09 '11 at 16:44

ajcw

23,604
6
30
47

score 91 · Answer 6 · edited Sep 24 '16 at 07:54

For Sass users:

// Create placeholder mixin
@mixin placeholder($color, $size:"") {
  &::-webkit-input-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &:-moz-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &::-moz-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &:-ms-input-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
}

// Use placeholder mixin (the size parameter is optional)
[placeholder] {
  @include placeholder(red, 10px);
}

score 75 · Answer 7 · edited Sep 12 '16 at 08:08

This will work fine. DEMO HERE:

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #666;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #666;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #666;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #666;
}

<input type="text" placeholder="Value" />

score 60 · Answer 8 · edited Sep 24 '16 at 07:48

In Firefox and Internet Explorer, the normal input text color overrides the color property of placeholders. So, we need to

::-webkit-input-placeholder { 
    color: red; text-overflow: ellipsis; 
}
:-moz-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
}
::-moz-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
} /* For the future */
:-ms-input-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
}

Mike Jerred · Answer 9 · 2022-06-24T09:25:23.430

60

CSS provides the ::placeholder pseudo-element.

Note that the .placeholder mixin from Bootstrap is deprecated in favor of this.

Example:

input::placeholder { color: black; }

When using autoprefixer the above will be converted to the correct code for all browsers.

edited Jun 24 '22 at 09:25

answered Aug 14 '15 at 09:25

Mike Jerred

9,551
5
22
42

Thank you... I was looking for a one line solution, not the TL;DR answers above. – Halo Mar 28 '22 at 15:15

score 45 · Answer 10 · answered Jan 02 '14 at 23:27

Cross-browser solution:

/* all elements */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }

/* individual elements: webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

/* individual elements: mozilla */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

Credit: David Walsh

score 44 · Answer 11 · edited Aug 12 '15 at 03:11

44

Now we have a standard way to apply CSS to an input's placeholder : ::placeholder pseudo-element from this CSS Module Level 4 Draft.

edited Aug 12 '15 at 03:11

Alexander O'Mara

58,688
18
163
171

answered Jan 16 '15 at 18:26

This works in Firefox 51. I'm just going to use this method; the other browsers will catch up soon enough for me (given that no functionality is broken if the to-be-standard style is not applied). – Lonnie Best Feb 27 '17 at 08:39

score 43 · Answer 12 · edited Aug 20 '21 at 10:23

I just realize something for Mozilla Firefox 19+ that the browser gives an opacity value for the placeholder, so the color will not be what you really want.

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #eee; opacity:1;
}
input:-moz-placeholder, textarea:-moz-placeholder {
    color: #eee; opacity:1;
}
input::-moz-placeholder, textarea::-moz-placeholder {
    color: #eee; opacity:1;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #eee; opacity:1;
}

I overwrite the opacity for 1, so it will be good to go.

score 39 · Answer 13 · edited Sep 24 '16 at 07:50

39

I don't remember where I've found this code snippet on the Internet (it wasn't written by me, don't remember where I've found it, nor who wrote it).

$('[placeholder]').focus(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
            input.val('');
            input.removeClass('placeholder');
        }
    }).blur(function() {
        var input = $(this);
        if (input.val() == '' || input.val() == input.attr('placeholder')) {
            input.addClass('placeholder');
            input.val(input.attr('placeholder'));
        }
    }).blur();
    $('[placeholder]').parents('form').submit(function() {
        $(this).find('[placeholder]').each(function() {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
            }
        })
    });

Just load this JavaScript code and then edit your placeholder with CSS by calling this rule:

form .placeholder {
   color: #222;
   font-size: 25px;
   /* etc. */
}

edited Sep 24 '16 at 07:50

Peter Mortensen

30,738
21
105
131

answered Apr 14 '13 at 02:28

Dragos Rizescu

3,380
5
31
42

4

This is the old way of doing it, which I've used quite a bit. The disadvantage is that the placeholder text disappears when you focus. I've found this to be annoying when the UI doesn't also include labels next to the input. Over the past several months I've started replacing this method with using placeholder text, which I think is a UX improvement. – Redtopia Dec 10 '13 at 19:31
5

The other problem with code like this is your serverside code has to deal with placeholder text as empty input, which has problems with edge cases where you want to enter a town called "Town". Instead of checking values against the placeholder text you should really use a data-modified flag on the input, and then clear the input on form submit if the flag is not set. And for AJAX interfaces you may not even have a form, so you should be able to associate an arbitrary submission event with the input. This is one of those really simple situations that isn't. – Whelkaholism Mar 07 '14 at 13:16

score 39 · Answer 14 · edited Sep 24 '16 at 07:53

39

For Bootstrap users, if you are using class="form-control", there may be a CSS specificity issue. You should get a higher priority:

.form-control::-webkit-input-placeholder {
    color: red;
}
//.. and other browsers

Or if you are using Less:

.form-control{
    .placeholder(red);
}

edited Sep 24 '16 at 07:53

Peter Mortensen

30,738
21
105
131

answered Dec 04 '14 at 09:01

gfaceless

1,529
1
17
22

score 39 · Answer 15 · edited Sep 24 '16 at 07:57

39

I think this code will work because a placeholder is needed only for input type text. So this one line CSS will be enough for your need:

input[type="text"]::-webkit-input-placeholder {
    color: red;
}

edited Sep 24 '16 at 07:57

Peter Mortensen

30,738
21
105
131

answered Jun 25 '15 at 09:01

Alias Varghese

2,104
3
24
52

Don't use this one anymore. There are several more elements with placeholder and more prefixes. See solutions above or use `::placeholder` together with autoprefixer. – RiZKiT Jul 19 '18 at 15:21

score 20 · Answer 16 · edited May 15 '19 at 16:15

20

How about this

<input type="text" value="placeholder text" onfocus="this.style.color='#000'; 
    this.value='';" style="color: #f00;" />

No CSS or placeholder, but you get the same functionality.

edited May 15 '19 at 16:15

Mobarak Ali

751
5
19

answered Oct 08 '12 at 19:21

user1729061

487
3
4

16

what happens if someone clicks again after writing something.. the original text they wrote will be gone! – Lucky Soni May 02 '13 at 10:04
3

@LuckySoni you _could_ do this, but I personally prefer the first one. `` – user1729061 May 18 '13 at 18:25
9

Even your second version doesn't provide the same functionality. If the user submits the ``
`` with this input the placeholder text will be sent to the server. I seen so many sites do this wrong.
– lqc May 30 '13 at 08:35
This is dangerous! If you come back again to the form you lost everything! – Mobarak Ali May 15 '19 at 15:10

score 20 · Answer 17 · edited Aug 20 '21 at 10:24

20

This short and clean code:

::-webkit-input-placeholder {color: red;}
:-moz-placeholder           {color: red; /* For Firefox 18- */}
::-moz-placeholder          {color: red; /* For Firefox 19+ */}
:-ms-input-placeholder      {color: red;}

edited Aug 20 '21 at 10:24

Alexander van Oostenrijk

4,644
3
23
37

answered Dec 22 '15 at 10:38

Banti Mathur

41
1
5

score 20 · Answer 18 · edited Sep 24 '16 at 08:01

If you are using Bootstrap and couldn't get this working then probably you missed the fact that Bootstrap itself adds these selectors. This is Bootstrap v3.3 we are talking about.

If you are trying to change the placeholder inside a .form-control CSS class then you should override it like this:

.form-control::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #777;
}
.form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #777;
    opacity:  1;
}
.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #777;
    opacity:  1;
}
.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:    #777;
}

score 16 · Answer 19 · edited Sep 24 '16 at 07:58

16

I have tried every combination here to change the color, on my mobile platform, and eventually it was:

-webkit-text-fill-color: red;

which did the trick.

edited Sep 24 '16 at 07:58

Peter Mortensen

30,738
21
105
131

answered Aug 05 '15 at 07:56

aviram83

880
11
15

2

`This property allows you to specify a fill color for text. If it is not set, then the color property will be used to do the fill.` It sounds to me like you've got some other CSS rule that is setting the `color` property. – David Murdoch Aug 05 '15 at 10:25

NVRM · Answer 20 · 2021-12-12T21:06:13.510

Adding an actual very nice and simple possibility: CSS filters!

It will style everything, including the placeholder.

The following will set both input elements on the same palette, using the hue filter for color changes. It render very well now in browsers (except ie...)

input {
  filter: sepia(100%) saturate(400%) grayscale(0) contrast(200%) hue-rotate(68deg) invert(18%);
}

<input placeholder="Hello world!" />
<input type="date" /><br>
<input type="range" />
<input type="color" />

To allow users to change it dynamically, using an input type color for changes, or to find nuances, check out this snippet:

From: Codepen

function stylElem() {
  stylo.dataset.hue = ((parseInt(stylo.value.substring(1), 16))/46666).toFixed(0)
  Array.from(document.querySelectorAll('input, audio, video')).forEach(function(e){
      e.style.cssText += ";filter:sepia(100%) saturate(400%)grayscale(0)contrast(200%)hue-rotate("+ stylo.dataset.hue+"deg)invert("+(stylo.dataset.hue/3.6)+"%)"
  out.innerText = e.style.cssText
})()}

stylElem()

body {background: black; color: white}

Choose a color!
<input type="color" id="stylo" oninput="stylElem()">
<br>
<div id="out"></div> <p>
  <input placeholder="Hello world!" />
  <input type="date" /><br>
  <input type="range" />
 <br>
<audio controls src="#"></audio> <br><br> 
<video controls src="#"></video>

Css filters docs: https://developer.mozilla.org/en-US/docs/Web/CSS/filter

score 9 · Answer 21 · answered Oct 04 '16 at 07:50

For SASS/SCSS user using Bourbon, it has a built-in function.

//main.scss
@import 'bourbon';

input {
  width: 300px;

  @include placeholder {
    color: red;
  }
}

CSS Output, you can also grab this portion and paste into your code.

//main.css

input {
  width: 300px;
}

input::-webkit-input-placeholder {
  color: red;
}
input:-moz-placeholder {
  color: red;
}
input::-moz-placeholder {
  color: red;
}
input:-ms-input-placeholder {
  color: red;
}

score 9 · Answer 22 · answered Oct 13 '17 at 06:47

try this code for different input element different style

your css selector::-webkit-input-placeholder { /*for webkit */
    color:#909090;
    opacity:1;
}
 your css selector:-moz-placeholder { /*for mozilla */
    color:#909090;
    opacity:1;
}
 your css selector:-ms-input-placeholder { /*for for internet exprolar */ 
   color:#909090;
   opacity:1;
}

example 1:

input[type="text"]::-webkit-input-placeholder { /*for webkit */
    color: red;
    opacity:1;
}
 input[type="text"]:-moz-placeholder { /*for mozilla */
    color: red;
    opacity:1;
}
 input[type="text"]:-ms-input-placeholder { /*for for internet exprolar */ 
   color: red;
   opacity:1;
}

example 2:

input[type="email"]::-webkit-input-placeholder { /*for webkit */
    color: gray;
    opacity:1;
}
 input[type="email"]:-moz-placeholder { /*for mozilla */
    color: gray;
    opacity:1;
}
 input[type="email"]:-ms-input-placeholder { /*for for internet exprolar */ 
   color: gray;
   }

Ismoil Shokirov · Answer 23 · 2021-11-03T06:43:28.093

7

This is fine for most of the modern browsers

input::placeholder{
  color: red; // css implementation
}

Just in case if you are using SCSS

input {
  &::placeholder {
    color: red; // scss
  }
}

edited Nov 03 '21 at 06:43

answered Oct 08 '21 at 16:21

Ismoil Shokirov

2,213
2
16
32

score 6 · Answer 24 · answered May 31 '16 at 09:21

6

Here is one more example:

.form-control::-webkit-input-placeholder {
  color: red;
  width: 250px;
}
h1 {
  color: red;
}

<div class="col-sm-4">
  <input class="form-control" placeholder="Enter text here.." ng-model="Email" required/>
</div>

answered May 31 '16 at 09:21

Mahendra Kulkarni

1,437
2
26
35

score 6 · Answer 25 · edited Dec 21 '17 at 08:10

You can change an HTML5 input's placeholder color with CSS. If by chance, your CSS conflict, this code note working , you can use (!important) like below.

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:#909 !important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:#909 !important;
   opacity:1 !important;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:#909 !important;
   opacity:1 !important;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:#909 !important;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:#909 !important;
}

<input placeholder="Stack Snippets are awesome!">

Hope this will help.

score 6 · Answer 26 · edited Aug 28 '22 at 20:31

6

::placeholder{
  color: red;
}

<input type="text" placeholder="Value">

edited Aug 28 '22 at 20:31

Martijn Pieters

1,048,767
296
4,058
3,343

answered Sep 01 '21 at 04:11

Sarvesh

95
1
13

score 5 · Answer 27 · answered May 11 '17 at 12:41

OK, placeholders behave differently in different browsers, so you need using browser prefix in your CSS to make them identical, for example Firefox gives a transparency to placeholder by default, so need to add opacity 1 to your css, plus the color, it's not a big concern most of the times, but good to have them consistent:

*::-webkit-input-placeholder { /* WebKit browsers */
    color:    #ccc;
}
*:-moz-placeholder { /* Mozilla Firefox <18 */
    color:    #ccc;
    opacity:  1;
}
*::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #ccc;
    opacity:  1;
}
*:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:    #ccc;
}

score 5 · Answer 28 · answered Oct 27 '18 at 20:41

5

The easiest way would be:

#yourInput::placeholder {
    color: red;/*As an example*/
}
/* if that would not work, you can always try styling the attribute itself: */
#myInput[placeholder] {
    color: red;
}

answered Oct 27 '18 at 20:41

codeWithMe

852
12
17

score 4 · Answer 29 · edited May 13 '18 at 15:19

You can use this for input and focus style:

input::-webkit-input-placeholder  { color:#666;}
input:-moz-placeholder  { color:#666;}
input::-moz-placeholder { color:#666;}
input:-ms-input-placeholder  { color:#666;}
/* focus */
input:focus::-webkit-input-placeholder { color:#eee; }
input:focus:-moz-placeholder { color:#eee } /* FF 4-18 */
input:focus::-moz-placeholder { color:#eee } /* FF 19+ */
input:focus:-ms-input-placeholder { color:#eee } /* IE 10+ */

score 4 · Answer 30 · answered Sep 04 '19 at 06:09

Here is the solution with CSS selectors

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}

::-ms-input-placeholder { /* Microsoft Edge */
   color:    #909;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}

WebKit, Blink (Safari, Google Chrome, Opera 15+) and Microsoft Edge are using a pseudo-element:
::-webkit-input-placeholder.
Mozilla Firefox 4 to 18 is using a pseudo-class:
:-moz-placeholder (one colon).
Mozilla Firefox 19+ is using a pseudo-element:
::-moz-placeholder, but the old selector will still work for a while.
Internet Explorer 10 and 11 are using a pseudo-class:
:-ms-input-placeholder.
Internet Explorer 9 and lower does not support the placeholder attribute at all, while Opera 12 and lower do not support any CSS selector for placeholders.

score 3 · Answer 31 · edited Jun 23 '23 at 16:51

3

Try this CSS:

input::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #ddd;
}
input::-moz-placeholder {
    /* Firefox 19+ */
    color: #ddd;
}
input:-ms-input-placeholder {
    /* IE 10+ */
    color: #ddd;
}
input:-moz-placeholder {
    /* Firefox 18- */
    color: #ddd;
}

edited Jun 23 '23 at 16:51

Kevin M. Mansour

2,915
6
18
35

answered Mar 26 '22 at 11:55

Lokesh Thakur

138
1
1
9

score 2 · Answer 32 · edited Jun 23 '23 at 16:51

2

Compass has a mixin for this out of the box.

Take your example:

<input type="text" placeholder="Value">

And in SCSS using Compass:

input[type='text'] {
  @include input-placeholder {
    color: #616161;
  }
}

See docs for the input-placeholder mixin.

edited Jun 23 '23 at 16:51

Kevin M. Mansour

2,915
6
18
35

answered Sep 20 '16 at 12:37

bendav91

31
4

score 2 · Answer 33 · edited Jun 23 '23 at 16:35

2

A part of HTML:

<form action="www.anything.com">
    <input type="text" name="name" placeholder="Enter sentence" />
</form>

I gonna show how to change the color of the expression 'Enter sentence' by CSS:

::placeholder {
    color: blue;
}

edited Jun 23 '23 at 16:35

Kevin M. Mansour

2,915
6
18
35

answered Jul 18 '19 at 03:35

dev_cc

61
2
6

score 1 · Answer 34 · edited Jun 23 '23 at 16:36

1

Try this:

input::placeholder {
   color: #900009;
}

edited Jun 23 '23 at 16:36

Kevin M. Mansour

2,915
6
18
35

answered Jan 23 '21 at 04:01

Ravat Sindhav

49
2
9

Why does this work? Consider adding some explanation to your answer to make it standout above the other solutions. – User1010 Jan 23 '21 at 09:31
I was missing the input part, thanks a lot – Kevin Oswaldo Oct 06 '21 at 17:21

score 0 · Answer 35 · edited Jun 23 '23 at 16:37

0

Try this:

::-webkit-input-placeholder {
   /* Chrome/Opera/Safari */
   color: pink;
}
::-moz-placeholder {
   /* Firefox 19+ */
   color: pink;
}
:-ms-input-placeholder {
   /* IE 10+ */
   color: pink;
}
:-moz-placeholder {
   /* Firefox 18- */
   color: pink;
}

edited Jun 23 '23 at 16:37

Kevin M. Mansour

2,915
6
18
35

answered Oct 23 '17 at 17:59

aphoe

2,586
1
27
31

score 0 · Answer 36 · edited Jun 23 '23 at 16:39

0

Use this code it works for all browsers.

CSS:

::placeholder {
   color: #ccc;
}

HTML:

<input class="form-control" placeholder="write Here.." />

edited Jun 23 '23 at 16:39

Kevin M. Mansour

2,915
6
18
35

answered Aug 16 '21 at 07:06

Priya Maheshwari

477
5
8

score 0 · Answer 37 · edited Jun 23 '23 at 16:40

0

input::placeholder {
   color: red;
}

<input type="text" placeholder="value" />

edited Jun 23 '23 at 16:40

Kevin M. Mansour

2,915
6
18
35

answered Feb 27 '22 at 06:35

Suresh Suthar

63
1
4

score -1 · Answer 38 · edited Jun 23 '23 at 16:42

-1

Try this, it'll work in all your favourite browsers:

::-webkit-input-placeholder {
   /* Chrome/Opera/Safari */
   color: pink;
}
::-moz-placeholder {
   /* Firefox 19+ */
   color: pink;
}

:-moz-placeholder {
   /* Firefox 18- */
   color: pink;
}

edited Jun 23 '23 at 16:42

Kevin M. Mansour

2,915
6
18
35

answered Sep 22 '17 at 14:12

Anand

207
2
8

score -1 · Answer 39 · edited Jun 23 '23 at 16:48

-1

This code will change the color of the placeholder using the ::placeholder selector.

::-webkit-input-placeholder {
    /* Edge */
    color: red;
}

:-ms-input-placeholder {
    /* Internet Explorer */
    color: red;
}

::placeholder {
    color: red;
}

edited Jun 23 '23 at 16:48

Kevin M. Mansour

2,915
6
18
35

answered Dec 11 '19 at 12:51

Mohsa

21
1

score -1 · Answer 40 · edited Jun 23 '23 at 16:47

.input-control::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: red !important;
    opacity: 1; /* Firefox */
}

.input-control:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: red !important;
}

.input-control::-ms-input-placeholder {
    /* Microsoft Edge */
    color: red !important;
}

<input type="text" class="input-control" placeholder="My Input" />

Check this reference to learn more.

score -2 · Answer 41 · edited Jun 23 '23 at 16:43

-2

In the HTML file:

<input type="text" placeholder="placeholder" class="redPlaceHolder" />

In the CSS file:

.redPlaceHolder {
   color: #ff0000;
}

edited Jun 23 '23 at 16:43

Kevin M. Mansour

2,915
6
18
35

answered Nov 27 '17 at 19:51

Joshua Charles Pickwell

177
2
8

score -2 · Answer 42 · edited Jun 23 '23 at 16:45

Placeholder color on specific element in different browsers.

.contact::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: pink;
}
.contact::-moz-placeholder {
    /* Firefox 19+ */
    color: pink;
}
.contact:-ms-input-placeholder {
    /* IE 10+ */
    color: pink;
}
.contact:-moz-placeholder {
    /* Firefox 18- */
    color: pink;
}

<input class="contact" type="email" placeholder="majed@firefly.com" />

Change an HTML input's placeholder color with CSS

42 Answers42

Implementation

CSS selectors

Usage notes

Linked

Related