如何在jQueryUI自动完成组合中删除BG图像(选择)

时间:2013-10-29 16:32:15

标签: css jquery-ui

我正在尝试设置jQueryUI自动完成的样式,并且在我的生活中无法找到如何在悬停时覆盖下拉列表中的样式!

(我是一个干净的平面外观,没有图像或渐变)。

我创建了一个说明问题的plunkr:http://plnkr.co/edit/pUdcIRgWDcnfuKYVpyQV?p=preview

我已经成功使用了所有其他jQUI元素,但不是这个。我也浏览过CSS文件,但是我想知道JS是否添加了某些东西,而我却无法在Chrome中观察到它?

即使在Chrome中检查它也很繁琐(我建议右键点击曝光的<li>

欢迎任何建议,谢谢

jquery.ui.theme.min69d2.css中的jQueryUI样式

.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;
}

我的样式表,它出现在jqueryUI之后,更具体(在#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;
}

2 个答案:

答案 0 :(得分:2)

它作为列表工作,这些项​​目的类是.ui-menu-item

查看此代码 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;
}

答案 1 :(得分:1)

对于可能从sass方面遇到此问题的其他人,如果您恰好使用jquery-ui-sass-rails gem(或其他sass变体),则只需在导入jquery.ui.all之前添加此内容即可

$bgImgUrlHover: none;

您可能也对$bgColorHover感兴趣。

相关的sass是:

.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 {
    border: 1px solid $borderColorHover;
    background: $bgColorHover $bgImgUrlHover $bgHoverXPos $bgHoverYPos $bgHoverRepeat;
    font-weight: $fwDefault;
    color: $fcHover;
}

Here is a full list of jquery.ui sass variables