◆ :placeholder-shown プレースホルダー表示中の要素 (input/textarea)
◆ ::placeholder プレースホルダーのテキスト

input の背景色を白以外にすると placeholder が見づらくなってしまいます
placeholder にもスタイル設定できるのかなと調べてみました


placeholder に関するセレクタは

  • :placeholder-shown
  • ::placeholder

の 2 つです

:placeholder-shown

プレースホルダーが表示されている要素 という擬似クラスです
input や textarea を指します
何か入力してプレースホルダーが表示されなくなるとスタイルが当たらなくなります

::placeholder

プレースホルダーのテキストの疑似要素です

::before や ::after の疑似要素はコロンが 1 つでもいいのですがこれは 2 つないと効果が出ませんでした
CSS3 からは疑似要素と疑似クラスでコロンが2つと1つに分かれました
個人的には 疑似要素も擬似クラスもどっちでもいいのでコロン1つに揃えてたのでちょっと嫌です

プレースホルダーのテキストを指すので文字色を変えるならこっちに指定します

サンプル

<input type="number" class="num" placeholder="Please type number"/>

<style>
.num{
padding: 3px 5px;
}
.num::placeholder{
border: 1px solid green;
color: hotpink;
}
.num:placeholder-shown{
border: 1px solid orange;
color: royalblue;
}
</style>

placeholder01
placeholder02

上がプレースホルダー表示時で 下が文字入力後です
プレースホルダーで右側に隙間があるのは type="number" の input の増減ボタンの幅です