はじめに
セレクトボックス（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プラグインを紹介します。
