title: fail to change placeholder color with Bootstrap 3
body: <p>Two questions:</p>
  
  <ol>
  <li><p>I am trying to make the placeholder text white. But it doesn't work. I am using Bootstrap 3. <a href="http://jsfiddle.net/ivawzh/G7mzL/9/"><strong><code>JSFiddle demo</code></strong></a></p></li>
  <li><p>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.</p></li>
  </ol>
  
  <p>Thanks in advance.</p>
  
  <p>html:</p>
  
  <pre><code>&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;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.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; } 
  </code></pre>