Question

我正在使用jquerys autocomplete小部件但是我在尝试设置搜索某些内容时下拉框的样式时遇到了一些问题。

我正在尝试将框移动一点并更改边框/ bg颜色，但有些JS正在添加一些嵌入式样式，这些样式覆盖了我的.css样式。但我找不到它。

我基于我的this one。

<ul class="ui-autocomplete ui-menu ui-widget-content" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 11; display: block; width: 139px; top: 44px; left: 1101px; "><li class="ui-menu-item" role="menuitem">

Answer 1

为了避免使用!important，您可以使用jQuery添加样式并以这种方式覆盖它们。

$('ul.ui-autocomplete').css({
    color: 'red'
});

另一种解决方案是从ul。

中删除style属性

$('ul.ui-autocomplete').removeAttr('style');

Answer 2

如果没有看到您的CSS样式或加载.css文件的顺序，您可以使用Firebug覆盖样式来检查应用了哪些类，并将!important;添加到主css中样式。

实施例

ul.ui-autocomplete {
color: red !important;
}

你可以解决这个问题的最佳方法是正确追踪你的jQuery插件是否有任何参数可以帮助你，或者自己剥离JS并添加你自己的CSS样式。

以上！重要;规则可能是一场噩梦，从某种意义上讲它是一种黑客 - 但它可能对你有用。

Answer 3

尝试在您的css中添加margin-top和margin-left

覆盖top和left值并不好，因为它是根据它派生的文本字段计算的。

Answer 4

我真的不是jquery的专家，但是我在你发送的例子中看一看，菜单样式都是菜单样式表（ jquery.ui.menu.css ）。请看下面的链接，我想有一些信息可以帮到你。

http://docs.jquery.com/UI/Menu#theming

您可以在这些课程中自定义下拉列表的外观。

«如果需要更深层次的自定义，可以修改 jquery.ui.menu.css 样式表中引用的特定于窗口小部件的类。»来自jquery网站。

Answer 5

尝试使用位置或附加选项... 你可以参考这里......

http://jqueryui.com/demos/autocomplete/#option-position

Answer 6

查看文件jquery.ui.theme.css，

顶部附近的班级.ui-widget-content可用于在自动填充搜索结果框中添加背景颜色，也可以通过此类调整边框和定位。

自定义下拉自动完成框

6 个答案: