如何正确覆盖Jquery UI样式

Question

我正在使用jquery autocomplete（+ jquery-ui.min.css），而且我遇到了样式问题。大多数先前的答案总结为添加！对css很重要，我想避免使用。

简单代码（自动填充与搜索输入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

您好像关注菜单的遏制，所以您正在寻找the appendTo option。来自文档：

  

将检查输入字段的父级是否为ui-front类。如果找到具有ui-front类的元素，则菜单将附加到该元素。无论该值如何，如果未找到任何元素，菜单将附加到正文中。

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

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

对于所描述的场景，没有必要乱搞CSS。如果你这样做，请小心使用

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

Answer 2

只需使用此选择器：

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