title: Why do I have to separate the -input-placeholder css tag for each browser?
body: <p>I tried setting an input placeholder color using the following CSS</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>input::-webkit-input-placeholder,
      input:-moz-placeholder,
      input::-moz-placeholder,
      input::-ms-placeholder {
         color: black;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input placeholder="Some Text"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>but it does not work as expected in Chrome 59. Instead, I have to write</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>input::-webkit-input-placeholder {
      color: red;
  }
  input:-moz-placeholder {
      color: red;
  }
  input::-moz-placeholder {
      color: red;
  }
  input::-ms-placeholder {
      color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input placeholder="Some text"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Why do I have to write my code like this?</p>