30
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

placeholderに付いてるスタイルを見てみたい!【Shadow DOM】

Last updated at Posted at 2019-04-03

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」というもので構成されているからです。

Shadow DOM を見えるようにする

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

1. 右上の「⋮」から「Settings」をクリック

#### 2. 「Preference」→「Elements」で「Show user agent shadow DOM」にチェック!

Shadow DOM を見てみる

もう一度コードを見てみましょう。
image.png
なんか見たことないDOMがあるーーー!!
内側のdivにスタイル付いてるーー!!!

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

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

参考リンク

30
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
30
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?