Изменить цвет фона элемента автозаполнения jQuery на основе состояния (используя CSS)

Цель состоит в том, чтобы создать элемент автозаполнения JQuery, элементы списка которого имеют синий фон, когда они зависают или фокусируются с клавиатуры. Окно поиска в Facebook отлично отделяет это.

Каждый элемент <li> содержит пользовательский HTML, заключенный в <a>. Каждый из этих тегов <a> принадлежит классу sbiAnchor. Генерирование синего фона при наведении можно успешно выполнить с помощью следующего CSS:

.ui-autocomplete a.ui-corner-all.sbiAnchor:hover{
    background: blue;
}

Но как применить один и тот же синий фон, когда пользователь открывает вверх или вниз список автозаполнения. Изменение кода CSS на следующее не работает:

.ui-autocomplete a.ui-corner-all.sbiAnchor:hover, .ui-autocomplete .ui-state-focus a.ui-corner-all.sbiAnchor{
    background: blue;
}

Какой правильный подход здесь? Имейте в виду, что этот синий фоновый эффект должен применяться только к одному конкретному автозаполнению на моей странице (некоторые из них существуют). Поэтому я использую sbiAnchor, чтобы отличать его элементы от других элементов автозаполнения. Другие автозаполнения должны сохранять поведение по умолчанию, поэтому селектора CSS не должны быть слишком широкими.

Ответ 1

Эта работа довольно проста

body .ui-autocomplete {
  /* font-family to all */
}

body .ui-autocomplete .ui-menu-item .ui-corner-all {
   /* all <a> */
}

body .ui-autocomplete .ui-menu-item .ui-state-focus {
   /* selected <a> */
}

Ответ 2

css hover станет формой этого класса css

вы можете переопределить его. например:

.ui-state-focus {
background: none !important;
background-color: blue !important;
border: none !important;}

Ответ 3

Это изменило цвет для меня.

.ui-menu-item .ui-menu-item-wrapper:hover
{
    border: none !important;
    background-color: #your-color;
}

Ответ 4

Я изменил цвет на:

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
}

Ответ 5

Ввод полей, а не тегов привязки, удерживает фокус. Это должно работать.

.ui-autocomplete-input:focus, .ui-autocomplete a.ui-corner-all.sbiAnchor:hover {
    background: blue;
}

Ответ 6

Понадобилось время, чтобы понять это, но правильный CSS-код:

.ui-menu .ui-menu-item a.sbiAnchor.ui-state-hover{
    background: blue;
}

Это убивает двух птиц одним камнем, обеспечивая синий фон для выбора и с помощью нажатия клавиш вверх/вниз. Элемент автозаполнения jQuery, по-видимому, обрабатывает нажатия клавиш вверх/вниз как "зависание", а не выбор или фокус.

Ответ 7

Такая старая тема, но решения выше не работали для меня. Если бы я пошел прямо вперед, я бы гораздо быстрее нашел решение:

Замените в своей пользовательской таблице стилей следующий стиль jquery-ui.css

.ui-autocomplete {
            border-radius: 0.25rem;
            background-color: #eceff1;
            padding: 0 0.6rem;
            font-family: 'ptmono';
        .ui-menu-item {
            border: 1px solid #eceff1;
            border-radius: 0.25rem;
            .ui-state-active,
    .ui-widget-content .ui-state-active,
    .ui-widget-header .ui-state-active,
    a.ui-button:active,
    .ui-button:active,
    .ui-button.ui-state-active:hover {
            background-color: #eceff1;
            border-color: #eceff1;
            color: #0d47a1;
            }
        }
    }

Вместо фона: none! important, вы можете установить фон в .ui-menu-item и в активном классе. Кроме того, вместо того, чтобы писать границу: нет! Важно перезаписать в обоих классах цвет границы с цветом фона, что предотвращает изменение высоты и с эффектом вобуляции.

Ответ 8

вот правильный ответ: просто измените "серый" на желаемый цвет

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
	border: none!important;
	background: grey;
	font-weight: normal;
	color: #ffffff;
}