title: How to make input placeholder font-size different from input value font-size
body: <p>I am in a situation where the required placeholder text for an input field is too long for the width of the field. To solve this, I am trying to give the placeholder a smaller <code>font-size</code>. It seems that no matter what I do, I cannot make the <code>font-size</code> of the placeholder text different than the value text. I've tried throwing <code>!important</code> on one, both, and neither with no luck.</p>
  
  <p>My React code:</p>
  
  <pre><code>&lt;input
    type="text"
    id="inputId"
    name="inputName"
    placeholder="A long string of text that does not fit"
    onChange={props.handleChange}
    value={props.someValue}
    className={styles.myClass}
  /&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>.myClass {
    font-size: 2em;
    height: 66.8125px !important;
  }
  
  .myClass::-webkit-input-placeholder { /* WebKit browsers */
    font-size: 1em;
  }
  
  .myClass:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    font-size: 1em;
  }
  
  .myClass::-moz-placeholder { /* Mozilla Firefox 19+ */
    font-size: 1em;
  }
  
  .myClass:-ms-input-placeholder { /* Internet Explorer 10+ */
    font-size: 1em;
  }
  </code></pre>