[David Hoang]

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?

[David Hoang]

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.

[David Hoang]

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

[David Hoang]

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

[David Hoang]

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

[David Hoang]

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 Hoang]

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

[David Hoang]

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

[David Hoang]

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>

[David Hoang]

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.

[David Hoang]

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

[David Hoang]

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

[David Hoang]

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

[David Hoang]

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

[David Hoang]

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

[Author]

Posts