html - 是否可以设置已保存输入字段数据的下拉菜单的样式

Question

我正在设计一个带有输入字段的表单。输入字段需要完全透明。输入字段本身没有问题，但是一旦我开始输入，浏览器就会打开包含保存的表单数据的下拉列表，显示我之前在输入字段中输入的单词。下拉菜单本身不是透明的，而是白色的。当我将鼠标悬停在输入字段中出现的其中一个已保存单词上时，输入字段也会显示为白色背景。

我尝试将事件、焦点和悬停状态的背景设置为透明，但这似乎没有用。我也无法在元素检查器中看到保存的表单数据下拉列表，所以我不知道如何定位它。

HTML:

<form class="" action="" method="_GET" accept-charset="utf-8" role="]">
    <div class="form-group">
        <label class="sr-only" for="q">Search Input Field</label>
        <input class="form-control" type="text" name="q" value="" placeholder="SEARCH">
    </div>
    <button type="submit" class="btn btn-default btn-red">SEARCH</button>
</form>

这是一个 fiddle :

http://jsfiddle.net/dtxeofnL/

单击输入字段并输入一个字母。如果您之前在输入字段(或浏览器中的其他输入字段)中输入过内容，则会出现下拉菜单。当您将鼠标悬停在下拉列表中的某个词上时，它会出现在输入字段中并为其提供不透明的白色背景。

这可以做到吗？

Answer 1

自动完成是特定于浏览器和操作系统的。似乎没有任何方法可以设置浏览器自身的内部自动完成功能的样式。

我建议完全禁用浏览器自动完成功能:

     <input autocomplete="off">

然后利用JqueryUI的自动完成功能，http://jqueryui.com/autocomplete/ ，可以按照您喜欢的任何方式设置样式。