Style the AutoCompleteExtender

In my previous post I wrote about building a custom field type, who extends the AutoCompleteExtender. Now... It all looks pretty, but if you take a look at the size of the textbox and the font of the dropdownlistitems you can see that we need to pimp our AutoCompleteExtender.

Here's the trick:

• Link the textbox with the 'ms-long' class. This CSS class provides the style for the list item metadata fields within SharePoint.
• Make a Div element that refers to the 'ms-long' class.

First we need to style the textbox:


Then style the AutoCompleteExtender dropdownlist:

• Make a Div element just above the AutoCompleteExtenderTag:


• Set the AutoCompleteExtender property [CompletionListElementID]:

Result: