jQuery UI の Autocomplete の CSS 設定を上書きする方法
jQuery UI の入力補完の機能を持ったオートコンプリート。単語リストを用意すれば、簡単に実装できるのが最大の魅力です。
入力補完として表示される単語リストの色は、jQuery UI 用に読み込まれた CSS ファイルに定義されています。この CSS はテーマファイルとして複数のデザインが用意されています。
jQuery UI のデザインはテーマファイルの変更により解決する場合もあるので、もしテーマファイルの存在をご存知ないのであれば、こちらからご確認ください。
最適なテーマを選択した上で、更にデザインを変更したいのであれば、スタイルシートを上書きすれば大丈夫です。では具体的にオートコンプリートのリストデザインを変更する場合の修正箇所について、説明していきましょう。
jQuery UI の Autocomplete のデザイン
例えば jQuery UI のテーマ「Base」を利用している場合、 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 を付けた部分が設定を変えた場所になります。
/* 各リスト項目のパディング設定 */
.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 設定を上書きする方法でした。
