Change a HTML5 input s placeholder color with CSS

Question

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   x000D   x000D  input placeholder    placeholder     placeholder        color  red  important    x000D   lt input type  text  placeholder  Value  gt  x000D   x000D   x000D   But Value will still remain grey instead of red  Is there a way to change the color of the placeholder text

User · Answer

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      lt input placeholder  Stack Snippets are awesome   gt    Hope this will help

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Compass has a mixin for this out of the box   Take your example    lt input type  text  placeholder  Value  gt    And in SCSS using compass   input type  text        include input-placeholder       color   616161          See docs for the input-placeholder mixin

User · Answer

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

User · Answer

lt style gt        -webkit-input-placeholder            color red                -moz-placeholder            color red            firefox 22          -ms-input-placeholder            color red            ie10 11        input -moz-placeholder            color red           lt  style gt

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Placeholder color on specific element in different browsers   HTML   lt input class  contact  type  email  placeholder  majed firefly com  gt   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

User · Answer

In the html file    lt input type  text  placeholder  placeholder  class  redPlaceHolder  gt    In the css file    redPlaceHolder     color   ff0000

User · Answer

lt input type  quot text quot  class  quot input-control quot  placeholder  quot My Input quot  gt      Add the following CSS in your head section   lt style type  quot text css quot  gt       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          lt  style gt   The following is the reference link  https   www w3schools com howto howto css placeholder asp

User · Answer

x000D   x000D     do not group these rules    x000D     -webkit-input-placeholder   x000D      color  red  x000D    x000D    -moz-placeholder   x000D         FF 4-18    x000D      color  red  x000D      opacity  1  x000D    x000D     -moz-placeholder   x000D         FF 19     x000D      color  red  x000D      opacity  1  x000D    x000D    -ms-input-placeholder   x000D         IE 10     x000D      color  red  x000D    x000D     -ms-input-placeholder   x000D         Microsoft Edge    x000D      color  red  x000D    x000D     placeholder   x000D         modern browser    x000D      color  red  x000D    x000D   lt input placeholder  hello   gt   lt br   gt  x000D   lt textarea placeholder  hello  gt  lt  textarea gt  x000D   x000D   x000D    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

User · Answer

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

User · Answer

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

User · Answer

Here is one more example    x000D   x000D   form-control  -webkit-input-placeholder   x000D    color  red  x000D    width  250px  x000D    x000D  h1   x000D    color  red  x000D    x000D   lt div class  col-sm-4  gt  x000D     lt input class  form-control  placeholder  Enter text here    ng-model  Email  required  gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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

User · Answer

You may also want to style textareas   input  -webkit-input-placeholder  textarea  -webkit-input-placeholder     color   636363    input -moz-placeholder  textarea -moz-placeholder     color   636363

User · Answer

How about this   x000D   x000D   lt input type  text  value  placeholder text  onfocus  this style color   000    x000D      this value      style  color   f00     gt  x000D   x000D   x000D    No CSS or placeholder  but you get the same functionality

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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   x000D   x000D    -webkit-input-placeholder      WebKit  Blink  Edge    x000D      color      909  x000D    x000D   -moz-placeholder      Mozilla Firefox 4 to 18    x000D     color      909  x000D     opacity   1  x000D    x000D    -moz-placeholder      Mozilla Firefox 19     x000D     color      909  x000D     opacity   1  x000D    x000D   -ms-input-placeholder      Internet Explorer 10-11    x000D     color      909  x000D    x000D    -ms-input-placeholder      Microsoft Edge    x000D     color      909  x000D    x000D   x000D    placeholder      Most modern browsers support this now     x000D     color      909  x000D    x000D   lt input placeholder  Stack Snippets are awesome   gt  x000D   x000D   x000D    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

User · Answer

try this its working input  placeholder    color  900009

User · Answer

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      x000D   x000D  input     filter  sepia 100   saturate 400   grayscale 0  contrast 200   hue-rotate 68deg  invert 18      x000D   lt input placeholder  Hello world     gt   lt input type  date    gt  lt br gt   lt input type  range    gt   lt input type  color    gt  x000D   x000D   x000D   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  x000D   x000D  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   x000D  body  background  black  color  white  x000D  Choose a color   lt input type  color  id  stylo  oninput  stylElem    gt   lt br gt   lt div id  out  gt  lt  div gt   lt p gt     lt input placeholder  Hello world     gt     lt input type  date    gt  lt br gt     lt input type  range    gt    lt br gt   lt audio controls src     gt  lt  audio gt   lt br gt  lt br gt    lt video controls src     gt  lt  video gt  x000D   x000D   x000D   Css filters docs  https   developer mozilla org en-US docs Web CSS filter

User · Answer

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

User · Answer

In Firefox and Internet nbsp 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

User · Answer

For Bootstrap and Less users  there is a mixin  placeholder      Placeholder text    -------------------------  placeholder  color   placeholderText       amp  -moz-placeholder       color   color         amp  -ms-input-placeholder       color   color         amp   -webkit-input-placeholder       color   color

User · Answer

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  lt 18        color      ccc      opacity   1       -moz-placeholder      Mozilla Firefox 19         color      ccc      opacity   1      -ms-input-placeholder      Internet Explorer 10-11        color      ccc

User · Answer

A part of HTML      lt form action  www anything com  gt    lt input type  text  name  name    placeholder  Enter sentence   gt     lt  form gt    I gonna show how to change color of expression of  Enter sentence  by CSS       placeholder    color blue

User · Answer

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

User · Answer

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

User · Answer

This will work fine  DEMO HERE    x000D   x000D  input  -webkit-input-placeholder  x000D  textarea  -webkit-input-placeholder   x000D    color   666  x000D    x000D  input -moz-placeholder  x000D  textarea -moz-placeholder   x000D    color   666  x000D    x000D  input  -moz-placeholder  x000D  textarea  -moz-placeholder   x000D    color   666  x000D    x000D  input -ms-input-placeholder  x000D  textarea -ms-input-placeholder   x000D    color   666  x000D    x000D   lt input type  text  placeholder  Value    gt  x000D   x000D   x000D

User · Answer

For Sass users      Create placeholder mixin  mixin placeholder  color   size          amp   -webkit-input-placeholder       color   color       if  size               font-size   size               amp  -moz-placeholder       color   color       if  size               font-size   size               amp   -moz-placeholder       color   color       if  size               font-size   size               amp  -ms-input-placeholder       color   color       if  size               font-size   size                  Use placeholder mixin  the size parameter is optional   placeholder       include placeholder red  10px

User · Answer

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

[css] Change a HTML5 input's placeholder color with CSS

Examples related to css

Examples related to html

Examples related to placeholder

Examples related to html-input