How do I apply styling to the buttons on ASP.NET Webforms ComboBoxes?

Brian Tan 40 Reputation points

I am trying to style the ComboBox in Webforms

User's image

I have two questions regarding this:

1.) Is there a way to apply Bootstrap to Comboxes?

2.) I'm trying to see if I can apply basic CSS to this but I have difficulties trying to change what the dropdown button looks like.

For reference, this is what the code looks like for the ComboBox

<ajaxToolkit:ComboBox ID="ComboBox" runat="server" AutoPostBack="False" DropDownStyle="DropDown"
 ClientIDMode="Static" AutoCompleteMode="suggest" CaseSensitive="False" Width="160px">
    <asp:ListItem Selected="true" Text="" Value="0"></asp:ListItem>
ASP.NET Web Forms
ASP.NET Web Forms
A part of the ASP.NET web application framework that can be used to create ASP.NET web applications.
652 questions
0 comments No comments
{count} votes

Accepted answer
  1. Lan Huang-MSFT 19,831 Reputation points Microsoft Vendor

    Hi @Brian Tan,

    Definitely, ComboBoxes will get render to basic html code so you could use bootstrap to manage it. Firstly, use need to incorporate the bootstrap framework's CSS styles and JavaScript functionality. For example:

    <link rel="stylesheet" href=><script src=></script> <script src=></script> <script src=></script>

    Note: Customize combobox might result input and button are not aligned. So, it’s better to use flex to make the button in center. Also Use bootstrap will make the default down-arrow disappear. So it’s better to download a down-arrow png file and use it.

    Here is the example for you.

        .bootstrap-combobox input {
            border: 1px solid grey;
            border-radius: 0.25rem;
            padding: 0.375rem 0.75rem;
            font-size: 1rem;
        .bootstrap-combobox .ajax__combobox_inputcontainer .ajax__combobox_textboxcontainer input {
            width: calc(100% - 30px);
        .bootstrap-combobox .ajax__combobox_buttoncontainer button {
            display: flex;
            align-items: center;
            border: none;
            border-radius: 0 0.25rem 0.25rem 0;
            background: #007bff url('./image/down-arrow.png') no-repeat center center;
            background-size: contain;
            color: black;

    After you define the css style in your ComboBoxes, use CssClass to implement it.

     <ajaxToolkit:ComboBox ID="ComboBox1" runat="server" AutoPostBack="False" DropDownStyle="DropDown"
        ClientIDMode="Static" AutoCompleteMode="suggest" CaseSensitive="False" Width="160px"
        <asp:ListItem Text="Item 1" Value="1"></asp:ListItem>
        <asp:ListItem Text="Item 2" Value="2"></asp:ListItem>

    Style gets changed. Result:

    enter image description here

    Best regards,
    Lan Huang

    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments No comments

2 additional answers

Sort by: Most helpful
  1. SurferOnWww 1,296 Reputation points

    You will probably be able to use the CssClass property of ComboBox. See the demo page of ComboBox:

    ASP.NET AJAX Control Toolkit Demos v20.1.0.0


    Above uses the AjaxControlToolKit style which is defined in the StyleSheet.css as .AjaxToolkitStyle. See the following definitions:


    You will be able to define your own style in the StyleSheet.css and apply it to your ComboBox.

    0 comments No comments

  2. Albert Kallal 4,376 Reputation points

    Not much need to add more here. Most of the "challenge" in this post is due to having used a custom control (the Ajax combo box from the AjaxToolkit).

    As pointed out, you can style the combo box, it just that the super duper ajaxtoolkit combo box has extra markup, and extra moving parts and it is NOT a standard control.

    Note that you can easy apply most if not all bootstrap class to any control, including most ones.

    So, if you drop in a dropdown list, even a one, then you get/see this:

    On left side, is default dropdown list (combo box), and next is SAME but with the bootstrap class applied:

                <div style="float: left; width:20%">
                    <h3>Standard Drop down</h3>
                    <asp:DropDownList ID="DropDownList1" runat="server">
                <div style="float: left; width:20%;margin-left:40px">
                    <h3>With boot strap</h3>
                    <asp:DropDownList ID="DropDownList2" runat="server"

    Above results in this:


    So, applying the bootstrap class to controls in most cases works rather nice, and thus using and applying bootstrap class(s) to given markup works just fine in As noted, your example case of using a custom combo box is somewhat different, and you have to apply styles to that custom control as per other suggesting's in this thread.

    I find that most (if not all) of the bootstrap classes for form and data input works 100% fine with markup and controls. Custom controls will of course require a bit more love and care.

    0 comments No comments