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

2017/02/14 , ,

jQuery UI の入力補完機能として実装することができる Autocomplete ですが、前回は実装方法について紹介しました。

jQuery UI の Autocomplete (入力補完) を実装する方法
今回はテキストボックスに文字を入力すると、入力候補が表示されるオートコンプリート機能の実装方法について説明をします。jQuery UI の機能により実装を行いますので...

この時、Autocomplete で表示されるリストの色は、jQuery UI用のCSSに定義されているDefault設定のカラーになっています。実際に画面のデザイン面から設置する場合、色合いを変更したいケースは多々あるでしょう。

今回は jQuery UI の Autocomplete の利用において、リストのデザインを変更する場合に、どのように修正することができるのか説明していきます。

jQuery UI の Autocomplete のデザイン

例えば、jQuery UI のテーマが UI lightness の場合、 css に設定されるデザインをそのまま利用すると、以下の通りリスト候補値にフォーカスすると、オレンジの枠線が付きます。

jq0001

実際にこれらの設定を定義しているスタイルシート部を抜き出すと、このようになります。(実際に以下のソース上にあるコメントは、標準のファイルに記述はありません。)

デザインを上書きする

標準のスタイルシートのファイルを上書きするか、もしくは別途定義し直すことで対応することができます。全てきちんと上書き出来れば問題無く反映されますが、簡単に上書きする方法として、全ての設定値に「!important」を付与すれば、そちらの定義を優先します。

実際に色を変えてみる

ではカラーを変更してみましょう。

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

デザイン変更結果を確認


↑アルファべト or ひらがな を入力してみてください。

実際に反映されているのが分かります。デザイン面で標準のまま利用するケースは非常に少ないと思います。具体的にどのスタイルを修正すれば良いのか、ソースコードを追いかける必要がありますが、これでもう大丈夫ですね!

PAGE TOP ↑