How to remove the BG image on jQueryUI autocomplete combo (select)


Tags: css,jquery-ui

Problem :

I'm trying to style the jQueryUI autocomplete, and can't for the life of me find out how to override the styles on the dropdown list on hover!

(I'm after a clean flat look, no image or gradient).

I've created a plunkr which illustrates the issue: http://plnkr.co/edit/pUdcIRgWDcnfuKYVpyQV?p=preview

I've had success with all the other jQUI elements, but not this one. I've gone through the CSS files, too, but I wonder if something is being added by JS whilst I can't observe it in Chrome?

Even inspecting it in Chrome is fiddly (I suggest right-clicking on the exposed <li>)

Any suggestions welcome, Thanks

jQueryUI styles in jquery.ui.theme.min69d2.css

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
    /* this is the damned hover!! */
    border:1px solid #999;
    background:#dadada url(images/ui-bg_glass_75_dadada_1x400.png) 50% 50% repeat-x;
    font-weight:normal;
    color:#212121;

    /* an override in place: this works */
    border: none;
    background-image: none;
    background: yellow;
    color:blue;
}

my stylesheet, which comes after jqueryUI and is more specific ( under an #id )

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
    /* fails */
    border: none !important;
    background-image: none !important;
    background: yellow !important;
    color:blue !important;
}


Solution :

It's workign as a list, the class for those items is .ui-menu-item

Review this code http://plnkr.co/edit/DQFOCVKIIBysKc4JQGtW?p=preview

.ui-autocomplete, .ui-autocomplete .ui-menu-item, .ui-autocomplete .ui-menu-item a {
  background:none;
}
.ui-autocomplete {
  background:orange;
}
.ui-autocomplete .ui-menu-item {
  background:red;
}
.ui-autocomplete .ui-menu-item a:hover {
  background:yellow;
}

    CSS Howto..

    How not to mess up styling when using css frameworks

    How to align like-buttons on my website between
    elements and put a white background to them?

    How to make sure that different severity Toasters are shown differently?

    How to get height of CSS manipulated image?

    How to make sure the UI always shrinks and fit to the window irrespective of the resolution and device via viewport or CSS

    how to change style of a css element using jQuery

    How to blend CSS classes for different results

    How to declare CSS font-face with font-weight and font-style properly?

    How to blur a banner photo in CSS Style?

    How can I center a logo and place the links left and right on the navbar using bootstrap?

    How can I mix vertically-centered elements with different font sizes and retain consistent line height?

    How to make div's width fit content not window

    How to get the table (datatable) left aligned?

    How to auto adjust margin to Auto center vertical & horizontal using jQuery and CSS margin

    CSS/Javascript: How to draw minimal border around an inline element?

    how do I make overflowing and float positioned elements stay all on one line?

    css + how to have cells with a border and cells without a border

    How to add all li of existing ul to the bottom of another ul base on their css classes

    How to change ol bullets for clickable images

    How to create rounded shapes with css or SVG

    How to draw a CSS petagon with all borders radius?

    how to add border to CSS only speech bubble

    Gantry Framework-Joomla How to edit logo from CSS

    How do I correctly locate a div within a list when making a horizontal nav bar with HTML/CSS?

    How to add external CSS to HTML 'style'

    How to use EMs in CSS Media Queries aligned with JavaScript events?

    How do I get MS Outlook to accept the CSS style display:block?

    How to give cross browser transparency to element's background only?

    using jquery show/hide doesn't keep css in div

    How to apply pseudo-element styling to specific class only?