Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Styling autocomplete dropdowns in browsers

On many websites, when typing in a username for example, a dropdown occurs where previous input shows up so the user can easily select something instead of typing. I know you can turn this off in browsers by having the form or input have an attribute of autocomplete="off". The problem is when I want it on, and the input has padding. The dropdown looks horribly off because it has no padding for each item.

Is there any way to style this with only css? I'm aware that you could potentially use a javascript/jQuery workaround to store previous entries in a cookie or something and make your own dropdown. But I don't want to rely on javascript for this.

like image 434
Matthew Avatar asked Feb 16 '12 15:02

Matthew


1 Answers

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.

like image 168
MMM Avatar answered Oct 19 '22 22:10

MMM