shadow DOMを知る前に、DOMが何なのかを知っておきましょう.

DOM

「Document Object Model」の略で、Webページに表示されるHTMLドキュメント全体をオブジェクトとして表示します.
一部の要素は、Webブラウザ内の開発者ツールでは表示されません.
スクロールバー、ドラッグ時に青をハイライトする部分など、これらの要素をカスタマイズしたい場合はどうすればいいですか?
shadow DOMを使えばいいです.
Chrome開発者ツールの設定ウィンドウで、「showuser agent shadow DOM」を選択すると、非表示の要素が表示されます.

これで、仮想要素を使用してスタイルを指定できます.

/* 크롬 호환 */
input::-webkit-input-placeholder {
  color: red;
}

/* 파이어폭스 호환 */
input::-moz-input-placeholder {
  color: red;
}

/* 익스플로러 호환 */
input::-ms-input-placeholder {
  color: red;
}

input::placeholder {
  color: red;
}