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>

这是一个小提琴：

http://jsfiddle.net/dtxeofnL/

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

可以这样做吗？

Answer 1

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

我建议完全禁用浏览器自动填充功能：

     <input autocomplete="off">

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

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

1 个答案: