placeholder プロパティ

placeholder 使っていますか？
placeholder は input 要素のフォームの中等にテキストを入れておけるHTMLの属性ですね。
↓こんな感じ。

HTML

<input placeholder="キーワード入れて検索">

このテキストにスタイルを付けるときは以下のように擬似要素を使ってスタイルを付けてやります。

CSS

input::placeholder {
  color: red;
  font-size: 0.5rem;
  font-style: italic;
}

スタイルを確認してみる

このスタイルをGoogle Chromeのデベロッパーツールで確認しようとすると…

>>>ない<<<
そう…ないのです。付いているはずのスタイルが見当たらない。
これは placeholder が「Shadow DOM」というもので構成されているからです。

Chromeのデベロッパーツールで Shadow DOM を見えるように設定してみましょう。

もう一度コードを見てみましょう。

なんか見たことないDOMがあるーーー！！
内側のdivにスタイル付いてるーー！！！

こんな感じで見ることができます。
placeholderは実はShadow DOMであるdivにテキストを渡して実装しているようですね。

他にも今まで見えていなかったものが見えるかも…👀