How to Style The Browser's Autocomplete Dropdown Box

How to style autocomplete dropdown list

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

Nope. Autocomplete is not a part of any standard, and is not part of the DOM. The only way to style is, as you've suggested yourself, by recreating that functionality using JavaScript.

customizing the drop down autocomplete box

In order to avoid using !important you could add your styles with jQuery and override them in that way.

$('ul.ui-autocomplete').css({
    color: 'red'
});

Another solution would be to remove the style attribute from the ul.

$('ul.ui-autocomplete').removeAttr('style');

Styling suggestions dropdown

No, it is browser's native implementation. the browser doesn't even add or modify any new DOM element therefore you can not style the dropdown list. I am not 100% sure but it looks like the drop down list is on a different layer on top of the display page. You will need to have a your own Javascript implementation of autocomplete.

By the way to disable this browser behavior, add this to the input element:

autocomplete="off"

Note that not all browser support autocomplete attribute

How do you style the dropdown on Google Places Autocomplete API?

If you use firebug (as mentioned in a comment to your question...) you see that the container with the autocomplete results is a DIV with the class "pac-container" and the suggestions are inside it as a DIV with the class "pac-item". so just style with CSS.