Styling Autocomplete Dropdowns in Browsers

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.

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

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

Is there a way to edit the styling of the suggestions given when typing in an input tag?

That is browser specific so no. Instead, you could build a custom system where you save the previously entered values in 'local storage' via javascript and then use an auto-complete library to display the previous entries how you like.

Some example code:

http://jsfiddle.net/R2TGL/

<input type="text" id="savedInput"/>

window.onload = function(){
 $('#savedInput').autocomplete({
    source:JSON.parse(localStorage.previousInputs)
 });

 $('#savedInput').change(function(){

    if( localStorage.previousInputs == undefined ) {
        localStorage.previousInputs = JSON.stringify([]);
    }

    var prevArray = JSON.parse(localStorage.previousInputs);
    prevArray.push($(this).val());
    localStorage.previousInputs = JSON.stringify(prevArray);

    $('#savedInput').autocomplete({
        source:JSON.parse(localStorage.previousInputs)
    });

 });
}

---

Related Topics