如何正确覆盖Jquery UI样式

Question

我使用jquery自动完成(+ jquery-ui.min.css)，我有与样式的问题。之前的大多数答案都是在css中添加!important，我希望避免这样。

简单代码(自动补全连接搜索输入id):

<div class="user-search">
  <form>
    <%= text_field_tag :user, params[:query], id: "search-input" %>
  </form>
</div>

然而，查看开发工具，这个与自动完成相关的ul类被推出了包含div，就在body标记中。

<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content">

是否有更好的方法来覆盖jquery ui样式?

谢谢!

Answer 1

使用这个选择器:

.ui-autocomplete.ui-front.ui-menu.ui-widget.ui-widget-content {
  /* Overridden Styles */
}

Answer 2

看起来您关心的是菜单的包含，所以您正在寻找的是appendTo选项。来自文档:

输入字段的父字段将被检查是否有ui-front类。如果找到一个带有ui-front类的元素，则菜单将被附加到该元素。无论该值是什么，如果没有找到元素，则将菜单添加到正文中。

因此，要将其更改为包含form的元素:

$("#search-input").autocomplete({
    // other options...
    appendTo: ".user-search > form"
});

对于所描述的场景，不需要乱搞CSS。请谨慎使用

ref。选项列表:http://api.jqueryui.com/autocomplete/