Styling an autocomplete textfield in Drupal

If you have ever wondered how to make the default autocomplete textfield look different, then, this blog is for you. The autocomplete textfield normally looks like this:

Autocomplete Before Styling

But, if you want to jazz it up a bit and give it a style of its own, perhaps, differentiate it based on odd/even results, then, you can use this short snippet below:

/* Give a left padding of 0px to the autocomplete textfield */
#autocomplete {
  padding-left: 0px;
}
 
/* Add odd even background colors to the list items*/
#autocomplete ul li:nth-child(even) { background: #fffdf2; }
#autocomplete ul li:nth-child(odd) { background: #fffbce; }

/* Change the background and text color when the mouse if hovering over the odd/even list items */
#autocomplete ul li:nth-child(even):hover, #autocomplete ul li:nth-child(odd):hover, 
/* Change the background and text color of the active odd/even list item */
#autocomplete ul li:nth-child(even):active, #autocomplete ul li:nth-child(odd):active 
{ 
  background: #ffb50a; 
  color: #ba3112;
}
 
/* Change the background and text color of the selected list item */
#autocomplete li.selected {
  background: #ffb50a; 
  color: #ba3112;
}
 
/* Give a left padding of 3px to the items in the autocomplete textfield, 
otherwise, they will be aligned right next to the textfield */
#autocomplete ul li{
  padding-left: 3px;
}

Now, your customized autocomplete textfield will look like this:

Autocomplete After Styling

It's as easy as that! Now, you can make really customized automcomplete fields to suit your needs.