fail to change placeholder color with Bootstrap 3

Question

Two questions    I am trying to make the placeholder text white  But it doesn t work  I am using Bootstrap 3  JSFiddle demo Another question is how do I change placeholder color not globally  That is  I have multiple fields  I want only one field to have white placeholder  all the others remain in default color    Thanks in advance   html    lt form id  search-form  class  navbar-form navbar-left  role  search  gt       lt div class    gt           lt div class  right-inner-addon  gt   lt i class  icon-search search-submit  gt  lt  i gt               lt input type  search  class  form-control  placeholder  search    gt           lt  div gt       lt  div gt   lt  form gt    css    right-inner-addon       position  relative     right-inner-addon input       padding-right  30px      background-color  303030      font-size  13px      color white      right-inner-addon i       position  absolute      right  0px      padding  10px 12px          pointer-events  none         cursor  pointer      color white         do not group these rules     -webkit-input-placeholder   color  white    FF 4-18   -moz-placeholder             color  white     FF 19    -moz-placeholder            color  white     IE 10   -ms-input-placeholder        color  white

User · Answer

Boostrap Placeholder Mixin    mixin placeholder  color   input-color-placeholder         Firefox    amp   -moz-placeholder       color   color      opacity  1     Override Firefox s unusual default opacity  see https   github com twbs bootstrap pull 11526        amp  -ms-input-placeholder   color   color       Internet Explorer 10     amp   -webkit-input-placeholder    color   color       Safari and Chrome     now call it    include placeholder  white

User · Answer

Bootstrap has 3 lines of CSS  within your bootstrap css generated file that control the placeholder text color    form-control  -moz-placeholder     color   999999    opacity  1     form-control -ms-input-placeholder     color   999999     form-control  -webkit-input-placeholder     color   999999      Now if you add this to your own CSS file it won t override bootstrap s because it is less specific  So assmuning your form inside a  then add that to your CSS   form  form-control  -moz-placeholder     color   fff    opacity  1    form  form-control -ms-input-placeholder     color   fff    form  form-control  -webkit-input-placeholder     color   fff      Voila that will override bootstrap s CSS

User · Answer

The others did not work in my case  Bootstrap 4   Here is the solution I used   html  form-control  -webkit-input-placeholder   color white    html  form-control -moz-placeholder   color white    html  form-control  -moz-placeholder   color white    html  form-control -ms-input-placeholder   color white      If we use a stronger selector  html first   we don t need to use the hacky value  important   This overrides bootstraps CSS as we use a higher level of specificity to target  form-control elements  html first instead of  form-control first

User · Answer

I m using Bootstrap 4 and Dennis Puzak s solution does not work for me   The next solution works for me   form-control  placeholder   color  white      Chrome  Firefox  Opera    -ms-input-placeholder form-control   color  white        Internet Explorer    form-control  -ms-input-placeholder   color  white        Microsoft Edge

User · Answer

There was an issue posted here about this  https   github com twbs bootstrap issues 14107  The issue was solved by this commit  https   github com twbs bootstrap commit bd292ca3b89da982abf34473318c77ace3417fb5  The solution therefore is to override it back to  999 and not white as suggested  and also overriding all bootstraps styles  not just for webkit-styles     form-control  -moz-placeholder     color   999     form-control -ms-input-placeholder     color   999     form-control  -webkit-input-placeholder     color   999

User · Answer

I think qwertzman is on the right track for the best solution to this   If you only wanted to style a specific placeholder  then his answer still holds true   But if you want to override the colour of all placeholders   which is more probable  and if you are already compiling your own custom Bootstrap LESS  the answer is even simpler   Override this LESS variable   input-color-placeholder

User · Answer

Assign the placeholder to a class selector like this    form-control  -webkit-input-placeholder   color  white        WebKit  Blink  Edge     form-control -moz-placeholder   color  white        Mozilla Firefox 4 to 18     form-control  -moz-placeholder   color  white        Mozilla Firefox 19      form-control -ms-input-placeholder   color  white        Internet Explorer 10-11     form-control  -ms-input-placeholder   color  white        Microsoft Edge      It will work then since a stronger selector was probably overriding your global  I m on a tablet so i cant inspect and confirm which stronger selector it was    But it does work I tried it in your fiddle   This also answers your second question  By assigning it to a class or id and giving an input only that class you can control what inputs to style

User · Answer

With LESS the actual mixin is in vendor-prefixes less   placeholder  color   input-color-placeholder            This mixin is called in forms less on line 133    placeholder      Your solution in LESS is    placeholder  fff     Imho the best way to go  Just use Winless or a composer compiler like Gulp Grunt works  too and even better faster

User · Answer

You should check out this answer   Change an HTML5 input  39 s placeholder color with CSS  Work on most browser  the solution in this thread is not working on FF 30  for example

User · Answer

A Possible Gotcha  Recommended Sanity Check - Make sure to add the form-control class to your inputs   If you have bootstrap css loaded on your page  but your inputs don t have the  class  form-control  then placeholder CSS  selector won t apply to them   Example markup from the docs     I know this didn t apply to the OP s markup but as I missed this at first and spent a little bit of effort trying to debug it  I m posting this answer to help others

[css] fail to change placeholder color with Bootstrap 3

Examples related to css

Examples related to twitter-bootstrap-3

Examples related to placeholder