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

Question

I am trying to style the ComboBox in Webforms

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>
</ajaxToolkit:ComboBox>

Answer 1

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=https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css><script src=https://code.jquery.com/jquery-3.3.1.slim.min.js></script> <script src=https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js></script> <script src=https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js></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.

 <style>
        

    .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;

        
    }

</style>

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"
    CssClass="bootstrap-combobox">
    <asp:ListItem Text="Item 1" Value="1"></asp:ListItem>
    <asp:ListItem Text="Item 2" Value="2"></asp:ListItem>
    
</ajaxToolkit:ComboBox>

Style gets changed. Result:

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.

Answer 2

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.

Answer 3

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 asp.net control.

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

So, if you drop in a dropdown list, even a asp.net 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">
                    <asp:ListItem>One</asp:ListItem>
                    <asp:ListItem>Two</asp:ListItem>
                    <asp:ListItem>Three</asp:ListItem>

                </asp:DropDownList>
            </div>


            <div style="float: left; width:20%;margin-left:40px">
                <h3>With boot strap</h3>
                <asp:DropDownList ID="DropDownList2" runat="server"
                    CssClass="form-control"
                    >
                    <asp:ListItem>One</asp:ListItem>
                    <asp:ListItem>Two</asp:ListItem>
                    <asp:ListItem>Three</asp:ListItem>

                </asp:DropDownList>
            </div>

Above results in this:

So, applying the bootstrap class to asp.net controls in most cases works rather nice, and thus using and applying bootstrap class(s) to given markup works just fine in asp.net. 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 asp.net markup and controls. Custom controls will of course require a bit more love and care.