asp.netcsscomboboxajaxcontroltoolkit

AjaxControlToolkit, ComboBox style


I am with a little problem with the arrow image of a ComboBox control (AjaxControlToolkit).

I define this style:

.WindowsStyle .ajax__combobox_inputcontainer .ajax__combobox_buttoncontainer button
{
    margin: 0;
    padding: 0;
    background-image: url(../icons/windows-arrow.gif);
    background-position: top left;
    border: 0px none;
    height: 21px;
    width: 21px;
}

I set this style on combobox, but the control are showing the border of the textbox before the arrow:

http://img190.imageshack.us/img190/9830/combobox.png)

Look here, the border aren't showing!

How can I hide this border?


Solution

  • This is working fine for me, I have the following css in my page head (though it can go anywhere else like in a stylesheet of course)

    <style type="text/css">
        .WindowsStyle .ajax__combobox_inputcontainer .ajax__combobox_textboxcontainer input
        {
            margin: 0;
            border: solid 1px #7F9DB9;
            border-right: 0px none;
            padding: 1px 0px 0px 5px;
            font-size: 13px;
            height: 18px;
            position: relative;       
        }
        .WindowsStyle .ajax__combobox_inputcontainer .ajax__combobox_buttoncontainer button
        {
            margin: 0;
            padding: 0;
            background-image: url(windows-arrow.gif);
            background-position: top left;
            border: 0px none;
            height: 21px;
            width: 21px;
        }
        .WindowsStyle .ajax__combobox_itemlist
        {
            border-color: #7F9DB9;
        }
    </style>
    

    And then I have this control markup in the body of my page:

    <ajaxToolkit:ComboBox ID="ComboBox1" runat="server" CssClass="WindowsStyle">
    <asp:ListItem Text="[Select an item]" Value="" />
    <asp:ListItem Text="Actual Item #1" Value="SomeValue" />
    <asp:ListItem Text="Actual Item #2" Value="3" />
    <asp:ListItem Text="Actual Item #3" Value="xxx" />
    </ajaxToolkit:ComboBox>
    

    Perhaps you have some conflicting styling? Have you tried a simple page with nothing but what you require to generate the combobox?