How to apply CSS Style to Ajax autocomplete box in ASP.NET

In this article I will explain how to apply CSS Style to Ajax autocomplete box in ASP.NET

Below is the CSS code:

   <style type="text/css">      

        .completionList {

            border: solid 1px #444444;

            margin: 0px;

            padding: 0px;

            height: 150px;

            overflow: auto;

            background-color: #FFFFFF;

        }

        .listItem {

            color: #1C1C1C;

        }

        .itemHighlighted {

            color: white;

            background-color: maroon;

        }

    </style>

Need to add above CSS style code to Autocomplete box

CompletionListCssClass="completionList"                                        CompletionListHighlightedItemCssClass="itemHighlighted"

CompletionListItemCssClass="listItem"

Total code for Ajax autocomplete box.

<ajaxtoolkit:AutoCompleteExtender

                                        runat="server"

                                        ID="autoComplete1"

                                        TargetControlID="txtAccountDescriptionIT"

                                        ServicePath="AutoComplete.asmx"

                                        ServiceMethod="GetCompletionList"

                                        MinimumPrefixLength="1"

                                        CompletionInterval="1"

                                        EnableCaching="true"

                                        CompletionSetCount="1" CompletionListCssClass="completionList"

                                        CompletionListHighlightedItemCssClass="itemHighlighted"

                                        CompletionListItemCssClass="listItem" />