By David Murdoch


2010-04-09 19:54:53 8 Comments

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

But 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?

30 comments

@Mohsa 2019-12-11 12:51:55

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

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

::placeholder { color: #colorcode;}

use it in css, and placeholder color changes.

@Mohammad Ayoub Khan 2019-09-04 06:09:40

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.

@dev_cc 2019-07-18 03:35:34

A part of HTML:

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

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

  ::placeholder{
  color:blue;
   }

@user1729061 2012-10-08 19:21:05

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.

@Lucky Soni 2013-05-02 10:04:13

what happens if someone clicks again after writing something.. the original text they wrote will be gone!

@user1729061 2013-05-18 18:25:19

@LuckySoni you could do this, but I personally prefer the first one. <input type="text" value="placeholder text" onfocus="if(!this.haswriting){this.style.color='#000'; this.value='';}" onblur="if(!this.value){this.style.color='#f00'; this.value='placeholder text'; this.haswriting=false;}else{this.haswriting=true};" style="color: #f00;"/>

@lqc 2013-05-30 08:35:21

Even your second version doesn't provide the same functionality. If the user submits the <form> with this input the placeholder text will be sent to the server. I seen so many sites do this wrong.

@Mobarak Ali 2019-05-15 15:10:46

This is dangerous! If you come back again to the form you lost everything!

@Majedur Rahaman 2018-11-19 04:49:19

Placeholder color on specific element in different browsers.

HTML

<input class='contact' type="email" placeholder="[email protected]">

CSS 

    .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;
    }

@codeWithMe 2018-10-27 20:41:40

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;
}

@brillout 2012-03-14 16:13:34

/* 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).

@danishgoel 2012-03-14 20:44:57

MSDN doc you linked to, states its only supported in Internet Explorer 10. Still a good find, but not very useful till IE10 userbase becomes significant (we may be looking at a time-frame of years for that).

@BadHorsie 2013-09-10 11:03:48

Realistically, you are going to want to style placeholders across the site uniformly, not style every individual input by ID.

@viplezer 2013-10-06 13:22:53

After FF19 you have to use ::-moz-placeholder

@Timo002 2014-07-02 07:44:25

You need to put this CSS at the bottom of you stylesheet, if you also apply a class on the input, in order to get it working on IE (11). See this fork on JSFiddle jsfiddle.net/9kkef. Open the page both in IE and another browser, in IE you will see that the placeholder text will be in the color of the applied class.

@Ahmed Na. 2020-04-13 16:13:18

Sometimes if not working, please add the < !important > to color property.

@fraweb 2017-12-20 15:00:26

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+ */

@NVRM 2018-03-31 22:04:08

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

enter image description here

enter image description here

enter image description here

It will style everything, including the placeholder.

The following will set both input on the same palette, using the hue filter for color change. 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: https://codepen.io/Nico_KraZhtest/pen/bWExEB

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()
<div id="out"></div> <p>
  <input placeholder="Hello world!" />
  <input type="date" /><br>
  <input type="range" />
  <input type="color" />
Colors (change me)-> 
<input type="color" id="stylo" oninput="stylElem()" /> <br><br>
<audio controls src="#"></audio> <br><br> 
<video controls src="#"></video>

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

@fuxia 2010-04-09 20:36:56

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.
  • 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;
    }

@BoltClock 2011-08-15 00:02:57

Wait... WebKit's version is a pseudo-element while Gecko's version is a pseudo-class. Won't the styles be applied to entirely different things then?

@fuxia 2011-08-15 04:51:22

@BoltClock Yes, that’s why you need the -webkit-appearance to let the pseudo element fill its parent box. In Mozilla you style a status, in WebKit a child element. There is no standard, and both implementations have pros and cons … I think, Mozilla’s is more consequent: it fits into the same scheme as :empty or :invalid.

@fuxia 2011-08-23 17:44:41

Tested in version 8.a.2 just now – still works. Note the leading : in :-moz-placeholder.

@Brenden 2011-08-29 23:09:39

Are you missing a : for the -moz selectors?

@dmnc 2011-09-05 14:38:43

Note also that although Webkit considers this to have rather strong specificity, Mozilla does not. You are likely to have to pop a few !importants in there to get things to show up.

@BoltClock 2011-12-04 17:17:25

@FuzzyDunlop: That's even odder - pseudo-elements (WebKit's implementation) are less specific than pseudo-classes (Mozilla's implementation). Supposedly.

@Oscar 2012-05-09 18:44:17

Using Firefox 12.0 on a Mac, it is possible to change the placeholder color with a regular input {color: red}, check this JSFiddle: jsfiddle.net/9tarR Bug?

@fuxia 2012-05-09 18:51:41

@Oscar Not necessary. There is still no standard that says what should happen in this case.

@Oscar 2012-05-11 08:07:59

@toscho Quite annoying, since using something like HTML5 Boilerplate will result in placeholder texts not being "dimmed" when using Firefox :/

@Sk8erPeter 2013-01-27 01:39:15

@toscho: thanks for the great answer. I just needed a little demonstration of it "live", so your example can also be reached here: jsfiddle.net/Sk8erPeter/KyVXK. Thanks again.

@igasparetto 2013-02-24 18:30:46

You can also change any other CSS definition, for example remove the default opacity. On that case, remember that IE uses the filter. filter: alpha(opacity=1);

@jwinn 2013-04-03 18:33:08

Firefox's placeholder appears to be defaulting with a reduced opacity. For anyone else hard-refreshing and wondering why the heck this doesn't appear to be working ("why is my white text still grey.."), use opacity:1

@Kevin 2013-04-22 23:08:36

Regarding the note "Mozilla Firefox 19+ is using a pseudo-element: ::-moz-placeholder, but the old selector will still work for a while." - it no longer seems to work, at least for me (FF v20)

@Volker E. 2013-06-03 08:10:30

@toscho Is -moz-appearance: textfield; for Firefox/Mac? Because I haven't seen any user agent stylesheet additions on PC…

@fuxia 2013-06-03 08:54:03

@VolkerE. That’s for all Mozilla based browsers.

@Volker E. 2013-06-03 09:15:33

@toscho Sorry, my question seems not be clear enough: What specific versions does this property address? Because on Windows, Firefox 5||19||21 doesn't change appearance of input[type="search"]. And I haven't found a single document so far that says Firefox --in contrast to Chrome-- changes default appearance.

@fuxia 2013-06-03 09:19:07

@VolkerE. Follow the link properties.

@Volker E. 2013-06-06 03:11:45

@toscho I've tested in Fx/Mac (Aurora) and Seamonkey and none of these had any rendering differences of [type="search"] compared to a normal text input field. So in a normalize.css similar way the only necessary property seems to be -webkit-appearance: textfield;

@Jeff Noel 2013-07-03 15:01:42

The CSS Selector rule explanation should be plated in gold. I struggled a lot before realizing the rule was getting ignored.

@wilsonrufus 2013-09-03 07:41:04

i had to apply input[type=text]::-webkit-input-placeholder to get the placeholder to get color if i only applied input::-webkit-input-placeholder it does not work .It works with Id also

@Jared 2013-12-13 03:55:43

In IE10 *:-ms-input-placeholder and :-ms-input-placeholder by itself does not work, but INPUT:-ms-input-placeholder does. Odd.

@Costa 2014-10-06 22:42:36

Note for Bootstrap 3: "form-control" class overrides the color due to CSS specificity (i.e. "form-control::-webkit-input-placeholder"), so you need to be at least as specific or use "!important" in your CSS. (this was hell to debug as neither Firebug nor Devtools seem to show this pseudo class)

@Alessandro 2014-11-20 14:02:58

I had to had "opacity:1" to get my CSS to work in FF 33.1 stackoverflow.com/questions/27041153/…

@user1063287 2016-02-14 17:22:43

How to apply to number? This doesn't seem to work: input[type="number"]::-webkit-input-placeholder {color: green;}

@tremby 2016-03-11 19:44:27

I wish this answer also mentioned ::placeholder (as mentioned in other answers), which is more similar to the vendor-specific ones than :placeholder-shown is.

@Luke 2016-10-02 23:38:52

I've noticed Chrome also messing with opacity of placeholders recently. I had to add opacity: 1; to ::-webkit-input-placeholder { }.

@Volker E. 2016-10-10 07:10:12

@Luke Be careful with setting opacity to anything else than 1 due to Edge parsing ::webkit-input-placeholder and running into a bug together with position set relative or absolute. See github.com/necolas/normalize.css/commit/… for more.

@fuxia 2016-10-10 09:56:58

@VolkerE. That's just one commit, no explanation, no reference. I wouldn't take that very serious.

@Volker E. 2016-10-11 22:46:00

@toscho Please follow the link in the commit developer.microsoft.com/en-us/microsoft-edge/platform/issues‌​/… ;)

@David Bradbury 2017-06-19 14:15:13

It should be noted that (at least in the most recent browsers I've tested) that you can set the color to color: inherit and it will inherit whatever color you've set the element to (in cases where you don't want a different color).

@oldboy 2019-07-19 02:12:48

any idea if it is possible to focus the particular placeholder of an element with focus?

@fuxia 2019-07-19 02:18:10

@BugWhisperer You can't focus a placeholder. Anyway, this might be a separate question. :)

@oldboy 2019-07-19 02:19:14

@fuxia you actually can focus the placeholder of an element with focus. look here.

@Deepak Kumar 2017-12-20 11:32:53

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.

@Joshua Charles Pickwell 2017-11-27 19:51:31

In the html file:

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

In the css file:

.redPlaceHolder{
   color: #ff0000;
}

@aphoe 2017-10-23 17:59:12

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;
}

@SUNIL KUMAR E.U 2017-10-18 09:43:51

<style>
    ::-webkit-input-placeholder { 
        color:red; 
     }
    ::-moz-placeholder { 
        color:red; 
    } /* firefox 22+ */
    :-ms-input-placeholder { 
        color:red; 
    } /* ie10,11 */
    input:-moz-placeholder { 
        color:red; 
    }
 </style>

@Md. Abu Sayed 2017-10-13 06:47:35

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;
   }

@Anand 2017-09-22 14:12:31

try this will help you this will work in all your fav browsers :

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

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

@Banti Mathur 2015-12-22 10:38:44

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;}

@Alireza 2017-05-11 12:41:30

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;
}

@Mike Jerred 2015-08-14 09:25:51

Use the new ::placeholder if you use autoprefixer.

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.

@trungk18 2016-10-04 07:50:11

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;
}

@steady_daddy 2016-05-03 12:43:22

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;
}

@aviram83 2015-08-05 07:56:32

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.

@David Murdoch 2015-08-05 10:25:49

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.

@Alias Varghese 2015-06-25 09:01:36

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;
}

@RiZKiT 2018-07-19 15:21:16

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.

@Burak Tokak 2015-04-13 23:53:27

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.

@Konst_ 2014-12-09 11:27:52

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);
}

@milkovsky 2017-05-08 10:33:09

More flexible way - to use @content;

@gfaceless 2014-12-04 09:01:55

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);
}

@EIIPII 2013-06-06 08:47:46

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;
  }
}

@William 2014-10-08 21:55:01

Or even simpler, edit the variable @input-color-placeholder - usually found in variables.less

@Brandito 2018-02-18 22:49:20

@William wouldn't it be easier to define the selector itself and use the mixin to avoid having to go back and change it in case you're looking to make another input's placeholder a different colour?

@William 2018-02-20 00:17:55

@Brandito - that sounds like an edge case - generally placeholder color is the same for all form elements within a design.

@Brandito 2018-02-20 01:11:24

@William Sorry I'm terrible at wording this sorta stuff, I thought it would've it be better to use the mixin with the argument of the input colour you desire although quite honestly, I'm probably thinking of the edge cases I'm used to (styling the search input placeholder where it's on a coloured background :P) so sorry but you're right, apologies.

@Dragos Rizescu 2013-04-14 02:28:11

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. */
}

@Redtopia 2013-12-10 19:31:29

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.

@Whelkaholism 2014-03-07 13:16:02

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.

@Dionysios Arvanitis 2013-02-14 21:11:14

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; 
}

@bendav91 2016-09-20 12:37:05

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.

Related Questions

Sponsored Content

32 Answered Questions

[SOLVED] How do I make a placeholder for a 'select' box?

32 Answered Questions

[SOLVED] Is there a CSS parent selector?

  • 2009-06-18 19:59:36
  • jcuenod
  • 2021097 View
  • 3171 Score
  • 32 Answer
  • Tags:   css css-selectors

32 Answered Questions

[SOLVED] How can I change an element's class with JavaScript?

  • 2008-10-12 20:06:43
  • Nathan Smith
  • 2584640 View
  • 2773 Score
  • 32 Answer
  • Tags:   javascript html dom

21 Answered Questions

[SOLVED] Storing Objects in HTML5 localStorage

30 Answered Questions

[SOLVED] How do I give text or an image a transparent background using CSS?

  • 2009-04-30 09:00:02
  • Stijn Sanders
  • 1521697 View
  • 2282 Score
  • 30 Answer
  • Tags:   html css opacity

28 Answered Questions

[SOLVED] Set cellpadding and cellspacing in CSS?

9 Answered Questions

[SOLVED] Why does HTML think “chucknorris” is a color?

19 Answered Questions

[SOLVED] Is it possible to apply CSS to half of a character?

  • 2014-05-09 16:16:57
  • Mathew MacLean
  • 242063 View
  • 2813 Score
  • 19 Answer
  • Tags:   javascript html css

17 Answered Questions

[SOLVED] Input placeholders for Internet Explorer

Sponsored Content