CSSの属性セレクターでフォーム入力欄をスタイリングする方法

フォームを作成する際、クライアントや顧客にとって魅力的で個性的なデザインにしたいものです。フォームの見せ方を工夫することで、ユーザーエクスペリエンスは大きく向上します。フォームをスタイリングするには、さまざまなCSSの入力タイプセレクターを活用しましょう。

基本構文とサンプル

この記事を読みながら、Codepenのサンプルも併せてご覧ください。
HTMLでのフォーム作成経験があることを前提としているため、HTMLの詳細な説明は省略します。
スタイルを何も適用していない状態のフォームは、次のような見た目になります。

もし1990年代なら、これでもそれほど悪くないかもしれません。当時人気のあったブラウザ「Netscape」のホームページを見れば、それがわかるでしょう。

しかし、今は90年代ではありません。幸いなことに現代にはCSSがあり、次のシンプルな構文だけで入力欄をスタイリングできます。

input[type="<type>"] {
  /* ここにスタイルを記述 */
}

テキスト入力欄のスタイリング

まず手始めに、入力欄とラベルのフォントサイズを整えてみましょう。キーワードを使えば、次のように簡単に選択できます。

input, label {
  font-size: 2rem;
  padding: 1rem;
}

これによりテキストが格段に読みやすくなり、入力欄の間にも適度な余白が生まれます。それでは、「名前」用のテキスト入力欄とメールアドレス入力欄をスタイリングしていきましょう。

input[type="text"] {
  border: 0;
  border-bottom: 0.3rem solid mediumspringgreen;
}
input[type="email"] {
  border: 0;
  border-left: 0.3rem solid mediumspringgreen;
  border-radius: 0.5rem;
}

ここでのポイントは、一度すべてのボーダーを消去し、必要な部分だけボーダーを付け直すことです。メールアドレス欄には角丸（border-radius）を加えることで、より柔らかく丸みのある印象にしています。ほんの数行のコードで、かなり良い改善が実現できました。

注意点：ドロップダウン（セレクトボックス）

スタイリングできる入力要素は他にもあります。そのひとつがドロップダウンです。ただし、ここに注意点があります。input[type="select"]と指定しても、ドロップダウンは選択できません。ドロップダウンを操作するには、selectというキーワードを使用する必要があります。

select {
  padding: 2rem;
  font-size: 2rem;
  width: 25rem;
  border: none;
  border-bottom: 0.3rem solid mediumspringgreen;
}

その他の入力欄のスタイリング

ここまで読み進めれば、入力欄のスタイリングのコツは十分につかめたはずです。すでにスタイルのパターンも見えてきましたね。それでは、同じパターンを数値入力（number）と日付入力（date）にも適用してみましょう。

input[type="number"], input[type="date"] {
  border: 0;
  border-bottom: 0.3rem solid mediumspringgreen; 
}

わずかなCSSとシンプルなセレクターを使うだけで、入力欄にまったく新しい印象を与えることができます！

これはほんの始まりにすぎません。ここから先、どんな表現が可能になるのか想像してみてください。

実は、Codepenのサンプルにはまだスタイル未適用の入力欄がいくつか残っています。ぜひ自由に好きなスタイルを適用してみてください。やり方はもう身についていますよね。さあ、実際に試してみましょう！