セレクトボックスをスタイリングできるjQueryプラグイン「customSelect.js」

「jQuery プラグイン」の利用（23）

　本連載では、JavaScriptライブラリとして利用頻度の高いjQueryとそのプラグインに着目して、その利用例を紹介します。今回は、フォーム部品の中でもスタイリングが難しいセレクトボックスを簡単にデザインできるjQueryプラグインを紹介します。

はじめに

　セレクトボックス（select要素）は、フォーム部品の中でもCSSによるスタイリングが難いパーツです。本記事では、jQueryプラグインの「customSelect.js」を使って、セレクトボックスを簡単にスタイリングする方法を紹介します。

対象読者

• （X）HTMLとCSSの基本を理解している方。
• デザインのコツを学びたい方。
• セレクトボックスをグラフィカルにスタイリングしたい方。

必要な環境

　jQuery本体。本記事では、jQuery 1.x系を使用します。Internet Explorer 6～8を考慮しなくてよい場合には、jQuery 2.x系も利用可能です。

　本連載で動作確認を行ったブラウザは次のとおりです。

• Windows 7 Internet Explorer 11（以下IE 11）
• Windows 7 Firefox 30
• Windows 7 Chrome 35

セレクトボックスをCSSでスタイリング

　図1のように、セレクトボックスのユーザーエージェントスタイルシートは、ブラウザによって異なります。

図1　セレクトボックスのデフォルトCSS（select.html）

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

　図2は、セレクトボックスをCSSだけでスタイリングした例です。

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

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

リスト1　背景やボーダー関連プロパティで装飾したセレクトボックス／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プロパティ

　CSS3のappearanceプロパティは、ユーザーが利用するプラットフォームに応じて、要素がその環境における標準的なUIになるよう指定するプロパティです。「appearance:none;」を指定すると、ChromeやSafariのwebkit系ブラウザであれば、右側に表示される下向きの三角形を消すことができますが、IEやFirefoxでは消すことができません（図3）。

図3　「appearance:none;」の表示結果（select.html）

　また、「appearance:button;」を指定してボタンとして装飾する方法もありますが、同じくPC向けのブラウザではwebkit系を除いて未対応のため、使用はスマートフォン向けにとどめるのが無難です。

図4　「appearance:button;」の表示結果（select.html）

　そこで、セレクトボックスをスタイリングするのに便利なjQueryプラグインを紹介します。