Question

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

我希望能够设置“自动填充建议下拉框”的样式（我不知道它的名称是什么，所以我试图描述它）。

例如我有

CSS

input[type=search] {
        background: none;
        font-weight: bold;
        border-color: #2e2e2e;
        border-style: solid;
        border-width: 2px 2px 2px 2px;
        outline: none;
        padding:10px 20px 10px 20px;
        width: 250px;
}

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

HTML

<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>

Answer 1

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

How to style the browser's autocomplete dropdown box?

Styling autocomplete dropdowns in browsers

Answer 2

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

Sample Working Demo

如果您使用的是Jquery AutoComplete，那么您可以使用以下css

进行定位

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

上面的css会将字体颜色更改为红色，然后将圆角设置为圆角以进行下拉选项。

完整代码：

＆＃13;

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <style>
        input[type=search] {
            background: none;
            font-weight: bold;
            border-color: #2e2e2e;
            border-style: solid;
            border-width: 2px 2px 2px 2px;
            outline: none;
            padding: 10px 20px 10px 20px;
            width: 250px;
        }
      /*Css to target the dropdownbox*/
        ul.ui-autocomplete {
            color: red !important;
            -moz-border-radius: 15px;
            border-radius: 15px;
        }
    </style>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script>
        $(function () {
            var availableTags = [
              "ActionScript",
              "AppleScript",
              "Asp",
              "BASIC",
              "C",
              "C++",
              "Clojure",
              "COBOL",
              "ColdFusion",
              "Erlang",
              "Fortran",
              "Groovy",
              "Haskell",
              "Java",
              "JavaScript",
              "Lisp",
              "Perl",
              "PHP",
              "Python",
              "Ruby",
              "Scala",
              "Scheme"
            ];
            $("#search_input").autocomplete({
                source: availableTags
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="ui-widget">
            <input name="city" id="search_input" type="search" placeholder="City, ST">
        </div>
    </form>
</body>
</html>

＆＃13;

Answer 3

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

确保您已下载jQuery-ui包并在html中提供了css和js的链接。 http://jqueryui.com/download/

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

Answer 4

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

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

-webkit-appearance:none;

要查看效果，请使用基于webkit的浏览器打开jsfiddle example，例如： G。 Safari浏览器。

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

修改：我误解了这个问题，因为你的css代码是针对搜索输入框的。根据新的HTML代码，您应该定位ID为city_search_matches的div样式。结果如何填充div是未知的，所以我无法帮助您使用任何代码示例。

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

4 个答案: