【CSS】擬似クラスの「:placeholder-shown」の使い方！【分かりやすい】

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

この記事ではCSSの擬似クラスの「:placeholder-shown」の使い方について解説します。

擬似クラスの「:placeholder-shown」って何？？

このような方が対象です。

また、下の動画でも擬似クラスの「:placeholder-shown」の使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります！

「:placeholder-shown」を使うと何ができる？

<form action="">

    <label for="name">名前</label>
    <input type="text" id="name" placeholder="ほんだ　ごろう">

</form>

input:placeholder-shown {
    border: 4px solid blue;
}

「:placeholder-shown」を使うとプレイスホルダー文字列が表示されている「input要素」や「textarea要素」にスタイルを当てることができます。

これにより、未入力の入力欄を強調することができます。枠線をつけたり、背景色をつけたりするといいでしょう！

「プレイスホルダー文字列」とは？

「プレイスホルダー文字列」とは、「input要素」や「textarea要素」で作る入力欄が未入力の時に表示される「入力例」のことです。

よく薄い文字で表示されるやつですね。

また、入力を開始するとその内容は消えてしまうので、「名前」などの何を入力するか示すものは「label要素」で作って常に表示されるようにして、「プレイスホルダー文字列」には「入力例」を入れるのがいいと思います。

「プレイスホルダー文字列」の使い方

<form action="">

    <label for="name">名前</label>
    <input type="text" id="name" placeholder="ほんだ　ごろう">

</form>

こんな感じで「プレイスホルダー文字列」は「input要素」や「textarea要素」の「placeholder属性」に表示したい文字列を入れることで表示できます。

設定しておくことでユーザーにヒントが与えられるので、ユーザーのために設定しておくといいでしょう！

なるほどね！分かりやすい

参考リンク。

仕様書。
https://drafts.csswg.org/selectors/#placeholder

MDN。
https://developer.mozilla.org/ja/docs/Web/CSS/:placeholder-shown

あわせて読みたい記事。

まとめ

「:placeholder-shown」を使うとプレイスホルダー文字列が表示されている「input要素」や「textarea要素」にスタイルを当てることができる。

「プレイスホルダー文字列」とは、「input要素」や「textarea要素」で作る入力欄が未入力の時に表示される「入力例」のこと。

「プレイスホルダー文字列」は「input要素」や「textarea要素」の「placeholder属性」に表示したい文字列を入れることで表示できる。

この記事が気に入った方は僕のTwitter（@chibasyuta）のフォローもお願いします！

また、下の動画でも擬似クラスの「:placeholder-shown」の使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それではこんな感じでこの記事を終わります！

ではまた！