Html 如何设置自动完成下拉列表的样式

我正在寻找一个纯HTML/CSS解决方案。到目前为止，我发现的一切都涉及插件（通常是jquery）

我希望能够设计“自动完成建议下拉框”（我不知道它到底叫什么，所以我试着描述它）

比如我有

CSS

“自动完成下拉框”是传统的简单白色框，有自己的默认字体。我不知道在我的CSS中要针对什么来更新这个

HTML

---

问题是浏览器，因为它们应用自己的样式。要绕过此限制，您需要覆盖/禁用浏览器引擎样式

对于webkit（在Safari中测试），请使用：

要查看效果，请使用基于webkit的浏览器打开，例如。G狩猎

有关搜索输入样式的webkit限制的更多信息：

编辑：

---

我误解了这个问题，因为你的css代码是针对搜索输入框的。基于新的HTML代码，您可能应该针对ID为

city\u search\u matches

的div样式。结果如何填充该div是未知的，因此我无法帮助您提供任何代码示例。

但是我不确定您使用的是哪个自动完成控件

如果您使用的是jqueryautocomplete，那么您可以使用下面的css作为目标

/*Css to target the dropdownbox*/
    ul.ui-autocomplete {
        color: red !important;
        -moz-border-radius: 15px;
        border-radius: 15px;
    }

上面的css会将字体颜色更改为红色，然后为下拉选项使拐角变圆

完整代码：

输入[类型=搜索]{
背景：无；
字体大小：粗体；
边框颜色：#2e；
边框样式：实心；
边框宽度：2px2px2px2px；
大纲：无；
填充：10px 20px 10px 20px；
宽度：250px；
}
/*Css以dropdownbox为目标*/
ul.ui-autocomplete{
颜色：红色！重要；
-moz边界半径：15px；
边界半径：15px；
}
$（函数（）{
var availableTags=[
“动作脚本”，
“AppleScript”，
“Asp”，
“基本”，
“C”，
“C++”，
“Clojure”，
“COBOL”，
“ColdFusion”，
“二郎”，
“Fortran”，
“好极了”，
“哈斯克尔”，
“爪哇”，
“JavaScript”，
“口齿不清”，
“Perl”，
“PHP”，
“Python”，
“红宝石”，
“斯卡拉”，
“方案”
];
$（“#搜索输入”）。自动完成({
资料来源：availableTags
});
});

显然，自动完成下拉框不能用CSS编辑，并且不是DOM的一部分。我从以下（重复的）问题中找到了这些信息

确保您已经下载了jQueryUI包，并在html中提供了css和js的链接

---

您覆盖的css文件是jquery-ui.css

如果可能，请提供autocompleteDropdownbox的HTML标记。谢谢。我添加了精简的HTML。当我进入城市（如萨克拉门托、圣地亚哥、塞勒姆）时，我的下拉框变大了，但我不知道如何设计它。我想我现在更了解人们的困惑。我没有任何代码创建autocompleteDropdownbox。我认为这是一些默认的浏览器。例如，如果您创建一个用于登录的简单html表单（仅一个用户名和密码字段）并开始使用随机帐户登录，您的浏览器将开始建议您使用这些随机帐户名登录。这个下拉框显示了以前的登录名，这不是我编写的代码。谢谢你看我的问题。我添加了输入[type=search]{-webkit外观：none；}，这似乎对我的问题没有任何影响。仍然会弹出一个下拉框，我仍然不知道如何设置它的样式。@drewsmug确定这没有帮助，我错过了您尝试设置下拉框样式而不是输入框样式的部分。。我编辑了我的回复，但目前信息有限，我只能给你这么多。我不懂asp:TextBox的内容。看起来这是ASP代码。我仍然对如何将dropbox定位为使用我指定的.autocomplete类样式感到困惑。这不是我写的元素，所以我不能在其中添加“class='autocomplete'”。作者特别要求他们尽量避免使用插件，而jquery则特别要求。

<div id="search">
        <form method="GET" action="events">
                <div id="search_field_container">
                        <input name="city" id="search_input" type="search" placeholder="City, ST">
                </div>
                <input type="submit" value="Find">
        </form>
</div>

-webkit-appearance:none;

/*Css to target the dropdownbox*/
    ul.ui-autocomplete {
        color: red !important;
        -moz-border-radius: 15px;
        border-radius: 15px;
    }

.ui-widget-content .ui-state-focus
{
    background: blue;
    border: 1px solid red;
}