jQuery UI の Autocomplete の CSS 設定を上書きする方法

2014/01/13

jQuery UI の入力補完の機能を持ったオートコンプリート。単語リストを用意すれば、簡単に実装できるのが最大の魅力です。

jQuery UI で Autocomplete (入力補完) を実装する方法
テキストボックスに一部の文字を入力すると、入力候補が表示される機能をオートコンプリートといいます。おおまかな仕組みとしては、候補となる単語のリストを用意するだけで入力...

入力補完として表示される単語リストの色は、jQuery UI 用に読み込まれた CSS ファイルに定義されています。この CSS はテーマファイルとして複数のデザインが用意されています。

jQuery UI のデザインはテーマファイルの変更により解決する場合もあるので、もしテーマファイルの存在をご存知ないのであれば、こちらからご確認ください。

jQuery テーマ一覧
jQuery UI を利用するには JavaScript のライブラリを読み込む必要があります。jQuery の処理を用いて実装されているため、具体的には以下の3ファ...

最適なテーマを選択した上で、更にデザインを変更したいのであれば、スタイルシートを上書きすれば大丈夫です。では具体的にオートコンプリートのリストデザインを変更する場合の修正箇所について、説明していきましょう。

jQuery UI の Autocomplete のデザイン

例えば jQuery UI のテーマ「Base」を利用している場合、 CSS に設定されるデザインをそのまま利用すると、リスト候補値へのフォーカスで背景が青く変わります。

ではこの部分のスタイルシートを抜き出してみましょう。以下のコードは、必要な部分だけ取り出して、分かりやすいようにコメントを追記しています。

jQuery UI Autocomplete の CSS 抜粋
/* 各リスト項目のパディング設定 */
.ui-menu .ui-menu-item-wrapper {
  position: relative; padding: 3px 1em 3px .4em;
}
/* リスト全体の背景 */
.ui-widget-content {
  border: 1px solid #c5c5c5;
  background: #ffffff;
  color: #333333;
}
/* リスト hover 時のカラー */
.ui-state-active {
  border: 1px solid #003eff;
  background: #007fff;
  font-weight: normal;
  color: #ffffff;
}

テーマによって設定される内容が異なります。上記例では最もシンプルな「Base」のテーマから抜き出したものになります。

デザインを上書きする

デザインを変更する方法として、次のどちらかを選んでください。

  • テーマファイルを直接上書きする
  • テーマファイルと別に上書き用 CSS を定義する

直接テーマファイルの内容を変更すると、jQuery UI のバージョンアップ時に同様の修正が必要になるため、別途定義することをおすすめします。なお、上書きが適用されるように、テーマ用 CSS ファイル読み込み後に定義するようにしましょう。

もし CSS の記述順(ファイル読み込み順)に関係なく、強制的にスタイルを上書きして問題なければ、全ての設定値に !important を付与してしまいましょう。

オートコンプリートの色を変える

変更箇所は必要な部分のみで結構です。今回の例では !important を付けた部分が設定を変えた場所になります。

jQuery UI Autocomplete のデザイン変更
/* 各リスト項目のパディング設定 */
.ui-menu .ui-menu-item-wrapper {
  position: relative; padding: 3px 1em 3px .4em;
}
/* リスト全体の背景 */
.ui-widget-content {
  border: 1px solid #666!important;
  background: #eee!important;
  color: #393!important;
}
/* リスト hover 時のカラー */
.ui-state-active {
  border: 1px solid #67969c!important;
  background: #3cbfd3!important;
  font-weight: bold!important;
  color: #ffffff;
}

この定義を利用して、実際にデザインを確認してみましょう。

デザイン変更結果を確認

文字を入力

分かりやすいように無理矢理デザインを変更している部分もありますが、リストの背景色を変更するだけで雰囲気が変わります。ぜひ自身のサイトに合った CSS デザインを適用してください。

以上 jQuery UI Autocomplete の CSS 設定を上書きする方法でした。

最新の更新情報は、Twitter、Facebook、Freedly にてお届け!

NJ-CLUCKER RSS

このブログの運営者

NJ

気力・体力勝負なシステム業界のエンジニアを経て、個人事業主として独立。Web サイト運営、動画制作など活動の場を広げています。

このブログでは、困ってたどり着いた人に、分かりやすく答えを提供できるように心掛けています。更新情報は、Twitter や Facebook ページを参照ください。フォローお待ちしています。

Facebook ページ NJ-CLUCKER
このブログが役に立ったら
「いいね!」お願いします

サイト内検索