Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

「jQuery プラグイン」の利用(23)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2014/09/22 14:00

 本連載では、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)
図1 セレクトボックスのデフォルトCSS(select.html)

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

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

図2 背景やボーダー関連プロパティで装飾したセレクトボックス(select.html)
図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)
図3 「appearance:none;」の表示結果(select.html)

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

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

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


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト 宮本麻矢(ミヤモト マヤ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:jQuery UI/プラグインの活用

もっと読む

All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5