フォーム内のplaceholderを簡単にカスタマイズできるCSS「:placeholder-shown」

おはようございます。

今日で入社して4年、そして5年目のスタートを切った社員Aです👩

同僚や上司に支えられながら たくさんの経験をさせていただき、一言では表せないくらいの濃い4年でした。本当に感謝の気持ちでいっぱいです。

今日からまた新しいスタートだと思って、初心を思い出して頑張っていきたいです。

さて、今回は「フォーム内のplaceholderを簡単にカスタマイズできるCSS :placeholder-shown」が便利だったので、ご紹介します！

フォーム内のplaceholderを簡単にカスタマイズできるCSS「:placeholder-shown」

CSSの「:」がつくものを疑似要素と呼び、この疑似要素はセレクターに付加するキーワードで、選択された要素の特定の部分にスタイル付けできるようにするものです。

よく使われる疑似要素

• :before{}
• :after{}

今回は疑似要素の一つである「:placeholder-shown」の使い方をご紹介したいと思います。

「:placeholder-shown」はあまり知られていない疑似要素ですが、こちらを使うことにより、フォーム内で設定をしたplaceholderの見た目をカスマイズすることができ、ユーザビリティにも繋がります。

「:placeholder-shown」の使い方

まず、「:placeholder-shown」の基本的な使い方やルールを説明していきたいと思います。

「:placeholder-shown」が使える要素

「:placeholder-shown」が使えるのは、下記の2つだけです。

お問い合わせフォームなどで使うインプット要素・テキストエリア要素のみに使用できます。

1. input
2. textarea

基本的な使い方

これは疑似要素全判に共通することですが、適用したい要素もしくはクラス名の後に擬似要素を記述する形で使用します。

input:placeholder-shown{
	background:yellow;
}
.test:placeholder-shown{
	color:#000;
}

実際に「:placeholder-shown」を使ってplaceholderをカスタマイズ

それでは、実際に「:placeholder-shown」を使ってフォームをカスタマイズしてみましょう！

入力カーソルを置くと、placeholderがタイトルに

See the Pen input :not(:placeholder-shown) by Andreas Storm (@andreasstorm) on CodePen.19785

入力し始めると同時にplaceholderがタイトルに

See the Pen Pop up labels when Typing with :placeholder-shown by Wes Bos (@wesbos) on CodePen.19785

入力カーソルでinput要素がふわっと浮き上がる

See the Pen :focus-within and :placeholder-shown selectors by Mert Nerukuc (@knyttneve) on CodePen.19785

CSSだけ！入力をするとボタンが有効に

See the Pen :placeholder-shown in action by Catalin Rosu (@catalinred) on CodePen.19785

CSSだけ！入力をするとチェックマークを表示

See the Pen Form with a bunch of HTML5 Validation and CSS3 Help by Chris Coyier (@chriscoyier) on CodePen.19785

まとめ

普段placeholderは標準スタイルのまま使用していましたが、疑似要素「:placeholder-shown」を使えば、CSSだけでここまでカスタマイズできるのに驚きました。

見た目も機能性もよく、ユーザビリティの面でも便利な疑似要素ですね！

案件で取り入れてみたいと思います！