Question

我在第一个例子中使用jQuery UI Autocomplate plugin。我还有其他插件引用的jQuery UI主题样式表。

这是我正在使用的输入：

CSS：

div.formvalue {
    background-color: #eee;
    border: 1px solid red;
    padding: 10px;
    margin: 0px;
}

div.paddedInput {
    padding: 5px;
    border: 1px solid black;
    background-color: white;
}

div.paddedInput input {
    border: 0px;
    width: 100%;
    outline:none;
}

HTML：

<div class="formvalue">
    <div class="paddedInput"><input type="text" value="Padded!" /></div>
</div>

以下是我的情况：

由于上面的div元素用作输入元素（在样式透视图上），自动完成列表看起来有点尴尬，因为它为输入元素设置了自己。

我挖掘了jQuery UI为自动完成功能创建的源代码，并且有ui-autocomplete样式类，但正如我所说，但我无法想象自动应该覆盖什么。

有什么想法吗？

更新

这是jsfiddle样本：

http://jsfiddle.net/tugberk/YxRYe/4/

Answer 1

如果要覆盖样式，可以使用!important关键字作为此代码

div.paddedInput input {
    border: 0px!important;
    width: 100%;
    outline:none;
}

Answer 2

我想这里的主要问题是为什么你首先要从样式的角度将外部div元素作为输入元素。

如果这不是必需的，请执行this。否则，我们必须使用JS将下拉列表的宽度设置为div的宽度并调整下拉列表的位置。一个相当hacky的解决方案i.m.o.我不知道如何指定下拉列表应该附加哪个元素，因为这很少是你想要的。

jQuery UI自动完成 - 当我们引用jQuery UI主题样式表时自定义样式

2 个答案: