настройка выпадающего списка автозаполнения

Question

настройка выпадающего списка автозаполнения

Я используюjquerys autocomplete виджет, но у меня есть несколько проблем, пытаясь стиль окна, которые выпадают, когда вы ищете что-то.

Я пытаюсь немного сдвинуть коробку вниз и изменить цвет границы/bg, но некоторые JS добавляют некоторые встроенные стили, которые переопределяют мои .CSS-стили. Но я не могу его найти.

Я основал свой на этом.

<ul class="ui-autocomplete ui-menu ui-widget-content" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 11; display: block; width: 139px; top: 44px; left: 1101px; "><li class="ui-menu-item" role="menuitem">

616 6

css jquery-ui-autocomplete

6 ответов:

Comments

Ничего не найдено.

Filip · Accepted Answer · 2011-12-09 12:17:18

Чтобы избежать использования !important, Вы можете добавить свои стили с помощью jQuery и переопределить их таким образом.
$('ul.ui-autocomplete').css({
    color: 'red'
});
Другим решением было бы удалить атрибут style из ul.
$('ul.ui-autocomplete').removeAttr('style');

SMacFadyen · Accepted Answer · 2011-12-09 12:11:56

Не видя ваших стилей css, или порядок, который вы загружаете .файлы css, вы можете переопределить стили, используя Firebug для проверки того, какие классы применяются, и добавив !important; к вашим основным стилям css.

Исх.
ul.ui-autocomplete {
color: red !important;
}
Лучший способ борьбы с этим-правильно отслеживать, есть ли у вашего плагина jQuery какие-либо параметры, которые помогут вам, или удалить JS самостоятельно и добавить свои собственные стили CSS.

Выше !важно; правило может быть кошмаром, это взлом в здравый смысл - но он может сработать и для вас.

HerrSerker · Accepted Answer · 2011-12-09 12:50:44

Попробуйте добавить margin-top и margin-left в css

Переопределение значений top и left не является хорошим, поскольку оно вычисляется в отношении текстового поля, из которого оно происходит.

Etienne Carrier · Accepted Answer · 2011-12-09 15:16:44

Я действительно не профессионал в jquery, но я смотрю вокруг в Примере, который вы послали, и стиль меню все дается таблицей стилей меню ( jquery.пользовательский интерфейс.меню.css ). Посмотрите на ссылку ниже, и там есть некоторая информация, которая может помочь вам, я думаю.

Http://docs.jquery.com/UI/Menu#theming

Вы сможете настроить внешний вид вашего выпадающего списка в этом классе.

" Если требуется более глубокий уровень настройки, существуют классы для виджетов ссылка в jquery .пользовательский интерфейс.меню.css таблица стилей, которую можно изменить.- С сайта jquery.

kalpesh · Accepted Answer · 2011-12-10 07:11:13

Попробуйте использовать параметр position или append to... вы можете обратиться сюда...

Http://jqueryui.com/demos/autocomplete/#option-position

Francis Kim · Accepted Answer · 2011-12-13 00:01:52

Проверьте файл jquery.ui.theme.css,

Класс .ui-widget-content в верхней части может быть использован для размещения цвета фона в поле результатов поиска автозаполнения, границы и позиционирование также могут быть изменены с помощью этого класса.