デザインサンプルで学ぶCSSによるスタイリング～「フォーム（ラジオボタン・チェックボックス・セレクトフォーム）」編

CSSで作るWeb用パーツ（6）

セレクトフォームのスタイリング

　図12のように、select要素のデフォルトCSSもブラウザによって異なります。現在のところ、select要素をCSSでスタイリングするには限界があります。その理由を説明します。

図12　CSSで生成したラジオボタン（select.html）

背景やボーダー関連プロパティで装飾

　図13はセレクトフォームを背景やボーダー関連のプロパティで装飾した例です。

図13　背景やボーダー関連プロパティで装飾したセレクトフォーム（select.html）

　背景画像を設定し、角丸のボーダーを設定したシンプルなスタイリング例です。

リスト17　CSSで生成したラジオボタン／CSS（select.html）

select#sample {
  margin: 0;
  padding: 10px;
  width: 280px;
  height: 40px;
  font-size: 14px;
  background: url("select.png");
  padding-left: 10px;
  border: 2px solid #ccc;
  border-radius: 5px;
}

appearanceプロパティ

　セレクトフォームは、背景やボーダー関連のプロパティで装飾することはできますが、右側に表示される下向きの三角形や、セレクトフォーム展開時の見栄えをCSSだけで制御することは現在のところ難しくなっています。

　CSS3のappearanceは、ユーザーが利用するプラットフォームに応じて、要素がその環境における標準的なUIになるよう指定できるプロパティです。図14のように、「appearance:none;」を指定すると、ChromeやSafariのWebKit系ブラウザでは右側の三角形を消すことができますが、IEやFirefoxでは消すことができません。また、値を「button」にして装飾する方法もありますが、同じくPC向けのブラウザではWebKit系を除き未対応のため、使用はスマートフォン向けにとどめた方が良いでしょう。

図14　appearanceプロパティの表示例（select.html）

　こういった理由により、現在のところは、セレクトフォームのスタイリングにはjQueryプラグインを使うのが無難です。具体的な方法については、後日別記事で紹介したいと思います。

まとめ

　今回は、前回に引き続きフォームの部品を紹介しました。ラジオボタン、チェックボックスは本来の見栄えを消した上でスタイリングするのがポイントです。セレクトフォームは現在のところCSSのみのスタイリングには限界があるので、jQueryを使うのが一般的です。次回は、これまで紹介したフォームの部品を組み合わせてお問い合わせフォームのスタイリング例を紹介します。