placeholder属性の色を変更する（最新ブラウザに限ればプレフィックスが不要なことに気づく） 🎨

これまで、

input::placeholder {
  color: red;
}

input::-moz-placeholder { {
  color: red;
}

input::-ms-input-placeholder {
  color: red;
}

という感じでベンダープレフィックスをつけて実装していたのですが、改めてMDN Web Docsを確認したところ、IE以外に対応しているようなので試してみました。

developer.mozilla.org

つまり、

input::placeholder {
  color: red;
}

これだけの指定です。

さまざまなブラウザで確認してみたところ、

• Google Chrome（95.0.4638.69）
• Safari（15.1）
• Firefox（93.0）
• Microsoft Edge（90.0.1020.40）
• Internat Explorer 11

にて、プレフィックス無しの指定のみでレンダリングされることが確認できました。
なぜか、Internat Explorer 11でも有効で驚きました。試してみるものですね。