How to style autocomplete dropdown list

Question

I am looking for a pure HTML / CSS solution. Everything I have found so far involves plugins (jquery usually).

I want to be able to style the "autocomplete suggestions dropdown box" (I don't know what it is really called so I tried to describe it).

For example I have

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

The "autocomplete dropdown box" is the traditional simple white box with it's own default font. I don't know what to target in my CSS to update this.

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>

if possible please provide the HTML Mark up of your autocompleteDropdownbox. — Jatin, Feb 03 '15 at 21:25
Thanks. I added the stripped down HTML. As I enter cities (e.g. Sacramento, San Diego, Salem) My dropdown box grows but I do not know how to style it. — drewsmug, Feb 03 '15 at 21:50
I think I understand peoples confusion more now. I don't have any code that creates the autocompleteDropdownbox. I think it is some default browser thing. For example if you create a simple html form for logging in (just a username and password field) and start signing in with random accounts, your browser will start suggesting you sign in with those random account names. That drop down box suggesting those previous login names is not something I coded. — drewsmug, Feb 03 '15 at 22:16

score 9 · Accepted Answer · edited May 23 '17 at 12:03

9

Apparently the autocomplete dropdown box cannot be edited with CSS and is not part of the DOM. I found this information from the following (duplicate) questions.

How to style the browser's autocomplete dropdown box?

Styling autocomplete dropdowns in browsers

edited May 23 '17 at 12:03

Community

1
1

answered Feb 03 '15 at 22:54

drewsmug

395
1
4
12

Jatin · Answer 2 · 2015-02-04T00:45:17.930

However I am not sure which auto complete control you are using .

Sample Working Demo

If you are using Jquery AutoComplete then you can target using the below css

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

Above css will change the font color to Red and then make the corner to be rounded for dropdownoptions.

Complete Code:

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

I don't understand the asp:TextBox stuff. It looks like that is ASP code. I'm still confused on how I would target the dropbox to use the .autocomplete class style that I specify. It's not an element that I wrote so I can't add "class='autocomplete'" to it. — drewsmug, Feb 03 '15 at 22:40

atastrumf · Answer 3 · 2015-02-03T21:56:46.387

0

Problem here are browsers, because they apply their own styles. To get around this restriction you need to override/disable browser engine styles.

For webkit(tested in Safari) use:

-webkit-appearance:none;

To see the effect, open jsfiddle example with webkit based browser, e. g. Safari.

More information on webkit restrictions of Search Inputs styling: LINK

Edit: I misunderstood the question, because your css code was targeting the search input box. Based on the new HTML code, you should probably target the style of div with ID city_search_matches. How the results populate that div is unknown, so I cannot help you with any code examples.

edited Feb 03 '15 at 21:56

answered Feb 03 '15 at 21:19

atastrumf

183
1
7

1

Thanks for looking at my question. I added input[type=search]{-webkit-appearance:none;} and that didn't seem to affect my problem in any way. There is still a dropbox popping up and I still have no idea how to style it. – drewsmug Feb 03 '15 at 21:44
1

@drewsmug Sure it didn't help, I missed the part that you are trying to style the dropdown not the input box.. I edited my response, but with currently limited information, that is all I can give you. – atastrumf Feb 03 '15 at 22:01

score 0 · Answer 4 · answered Aug 10 '15 at 07:17

0

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

Make sure you have downloaded the jQuery-ui package and provided links for the css and js in your html. http://jqueryui.com/download/

The css file you're overriding is jquery-ui.css

answered Aug 10 '15 at 07:17

Cameron Hunter

17
2

4

Author specifically requested they were trying to avoid plugins, and jquery specifically. – silentmouth May 17 '18 at 14:20

How to style autocomplete dropdown list

4 Answers4

Linked