jQuery自动完成样式 [英] Jquery autocomplete styling

问题描述

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

While styling the jQuery autocomplete plugin, I get the following HTML code hardwired to my page:

<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文件不会覆盖该样式.

How can I disable styling from being made through HTML and keep it done via CSS? I don't think my CSS files are overwriting that style.

任何帮助都可以

推荐答案

jQuery自动完成功能需要设置一些内联样式，以将下拉列表放置在文本框下方并对其进行均等化.

jQuery autocomplete needs to set some inline styles to position the drop down list under the text box and size it equally.

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

It doesn't set anything else, so it's completely up to you to provide visual styling of it by setting styles of those classes that are added to it (ie. ui-autocomplete).

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

What I'm trying to tell you is this: set the visual aspects of the drop down list that gets displayed and don't worry about positioning and sizing inline styles.

如果确实需要覆盖此元素的位置和大小，则可以始终将样式设置为!important.

If you do need to override positioning and sizing of this element you can always set your styles as !important.

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

其他修改

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

Additional edit

Setting margin-top doesn't do anything since it calculates position every single time it displays the drop down. But you can try setting this:

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

这实际上可以解决问题.

This actually does the trick.

这篇关于jQuery自动完成样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！