あまり知られていない、フォームをCSSでスタイルするために役立つ便利なセレクタとその使い方

フォームをCSSでスタイルするのは難しいと思われていました。しかし、input要素とそれに関連する要素をスタイルするためのあまり知られていないセレクタがあります。いくつかは比較的新しいセレクタですが、昔から存在するセレクタもあります。

フォームの見た目だけでなく、機能も強化するCSSの便利なセレクタとその使い方を紹介します。

サイトのキャプチャ

Advanced CSS-Only Form Styling
by Jonathan Harrell

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

フォームにスタイルを適用したデモ

ここで紹介するフォームのスタイルは、下記デモページで実際の動作を確認できます。

サイトのキャプチャ

デモページ

:placeholder-shown

フォームのキャプチャ

最初に紹介する「:placeholder-shown」は比較的新しいセレクタで、IEにはサポートされていません(ブラウザのサポート状況)。しかし、フォームの動作的にはセレクタが機能しなくても、問題はありません。
このセレクタを使用すると、プレースホルダがユーザーに表示されているかどうかを検出できます。input要素に関連づけられたlabel要素を非表示にしたり、表示したりが簡単にできます。

ここではユーザーがinput要素に入力してプレースホルダを非表示にするまで、label要素を隠しています。label要素を表示する際にアニメーション(移動・変形・不透明度)を加えると、CSSだけで実装されているとは思えないほど素敵なエフェクトに見えるかもしれません。実装の注意点は、label要素は必ずinput要素の後にすることです。

:required

フォームのキャプチャ

このセレクタを使用して、フォームの入力欄が必須であることを明示します。ここでは、空のspan「.help-text」を使用し、::before擬似要素を使用して動的にコンテンツを配置しています。
実際にはJavaScriptで実装することが多いと思いますが、ここではCSSのアプローチを示すために取り上げています。

:optional

フォームのキャプチャ

このセレクタは「:required」と反対で、フォームの入力欄がオプションの場合に使用します。HTMLは「:required」と同じ構造で実装し、空のspan「.help-text」を使って、required属性がない場合にはオプションのテキストを表示しています。

:disabled

フォームのキャプチャ

「:disabled」は多くの人に馴染みがあるセレクタだと思いますが、覚えておくことが重要です。
ユーザーの入力を無効にするのが必要になる時が必ずあります。

:read-only

フォームのキャプチャ

readonly属性を持つ入力欄は、disabled属性とは意味が少し異なります。両方とも値を編集できない点は同じですが、disabledは値を送信せず、readonlyは値を送信します。ありがたいことに、その助けとなる「:read-only」セレクタが用意されています。

:valid

フォームのキャプチャ

多くのフォームの検証はJavaScriptでおこなわれますが、HTML5 Form Validationとinput要素のスタイルを利用することもできます。「:valid」はその中の一つで、ブラウザがネイティブに備えているValidationルールを通してinput要素をスタイルします。

ここではbackground-imageプロパティを使用して、ユーザーが入力した際にSVGでチェックを表示するようにしました。

:invalid

フォームのキャプチャ

「:invalid」は、ブラウザがネイティブに備えているValidationルールをパスしていないかどうかをチェックするセレクタです(例えば、メール入力に実際の電子メールが含まれていない場合など)。

今度は、SVGで「x」を表示するようにしました。

空のspan「.help-text」と::before疑似要素を使用して、入力欄に適したエラーメッセージを表示させることもできます。

:in-range/:out-of-range

フォームのキャプチャ

「:in-range」と「:out-of-range」は、数値入力の値が指定された最小値と最大値の範囲内にあるかどうかを検出します。

:checked

フォームのキャプチャ

「:checked」は多くの人が精通しているセレクタだと思います。「checked」を記述すると、チェックボックスやラジオボタンをチェックした状態にすることができます。
チェックボックスを実装する時にわたしが使用するテクニックは、ラッパー要素を作成し、input要素の後にlabel要素を配置します。

input要素は視覚的に隠されますが、それでもクリック可能です。視覚的に隠したので、「label::before」でチェックボックスを、「label::after」でチェックマークを作成します。これらに「:checked」セレクタを使用して、2つの擬似要素にスタイルを適用します。

フォームの基本スタイルを提供するフレームワーク

CSS framework Hi-Qは、チェックボックス、ラジオボタン、無効化されたinput要素など、フォーム入力のための便利な基本スタイルを提供するフレームワークです。

サイトのキャプチャ

CSS framework Hi-Q

テーマビルダーも用意され、フォームの各要素のスタイルを見ながら変更できます。

しかも軽量で、動的に変更できるCSS変数、​​特にテーマの切り替え機能が便利です。

top of page

©2017 coliss