Jquery 自动完成样式

Question

在设计 jQuery 自动完成插件样式时，我将以下 HTML 代码硬连线到我的页面:

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 0px; left: 0px; display: none; "></ul>

如何禁用通过 HTML 制作的样式并通过 CSS 保留样式？我不认为我的 CSS 文件会覆盖该样式。

任何帮助都可以

Answer 1

jQuery 自动完成功能需要设置一些内联样式，将下拉列表放置在文本框下方，并使其大小相等。

它没有设置任何其他内容，因此完全由您通过设置添加到其中的类的样式来提供它的视觉样式(即ui-autocomplete)。

建议

我想告诉您的是:设置显示的下拉列表的视觉效果，而不必担心内联样式的定位和大小。

需要改变定位

如果您确实需要覆盖此元素的定位和大小，您可以随时将样式设置为 !important。

ul.ui-autocomplete
{
    position: absolute;
    left: 100px!important;
    top: 0!important;
    ...
}

额外编辑

设置 margin-top 不会执行任何操作，因为它每次显示下拉菜单时都会计算位置。但你可以尝试这样设置:

.ui-autocomplete
{
    border-top:5px solid transparent!important;
}

这实际上起到了作用。