title: How to change <input/>'s placeholder color?
body: <p>I tried the following with the stylesheet and <code>&lt;input/&gt;</code> yet the color of the placeholder still has not changed and stays at the default color. Am I doing it incorrectly?</p>
  
  <p>my css stylesheet:</p>
  
  <pre><code>#input-field {
    background-color: rgba(255,255,255,0.1);
    border: 0;
    border-radius: 5px;
    width: 150px;
    height: 40px;
    padding: 12px;
    box-shadow: none;
    color: rgba(255,255,255,0.8);
  }
  
  :-webkit-input-placeholder { /* WebKit, Blink, Edge */
      color:    blue;
  }
  
  :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
     color:    blue;
     opacity:  1;
  }
  
  ::-moz-placeholder { /* Mozilla Firefox 19+ */
     color:    blue;
     opacity:  1;
  }
  
  :-ms-input-placeholder { /* Internet Explorer 10-11 */
     color:    blue;
  }
  </code></pre>
  
  <p>And my <code>&lt;input/&gt;</code>:</p>
  
  <pre><code>  &lt;input
      className="form-control"
      id="input-field"
      placeholder='Change This Color'
    /&gt;
  </code></pre>