如何修复 ASP.NET AjaxToolkit ComboBox 的样式？答案

【问题标题】：How to fix the style of ASP.NET AjaxToolkit ComboBox?如何修复 ASP.NET AjaxToolkit ComboBox 的样式？
【发布时间】：2013-10-01 21:18:45
【问题描述】：

我是一名新的 ASP.NET 开发人员，我正在尝试使用 ASP.NET AjaxControlToolkit。我喜欢 ComboBox 控件，我正在尝试在its website HERE 中使用它。

我只是将它拖放到我的简单页面中，然后将样式应用于它。但是，它并没有像在其网站上那样正确显示。

ASP.NET 代码：

<div>
        <asp:ComboBox ID="ComboBox1" runat="server" DropDownStyle="DropDownList"
                            AutoCompleteMode="SuggestAppend" CssClass="AjaxToolkitStyle" AppendDataBoundItems="false">
                    <asp:ListItem>Select</asp:ListItem>
                    <asp:ListItem>All</asp:ListItem>
                </asp:ComboBox>
    </div>

CSS 代码：

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}

body, div, p, h1, h2, h3, h4, ul, li, table
{
    margin:0;
    padding:0;
    border:none;
}
/* ComboBox styles */
#master_content .ajax__combobox_itemlist
{
    margin: 0px;
}

.AjaxToolkitStyle .ajax__combobox_inputcontainer .ajax__combobox_textboxcontainer input
{
    background-image: url(ComboBox/images/toolkit-bg.gif);
    background-position: top left;
    border: 0px none;
    color: #FFFFFF;
    padding: 4px 0px 3px 5px;
    font-size: 13px;
    height: 16px;
    width: 240px;
}
.AjaxToolkitStyle .ajax__combobox_inputcontainer .ajax__combobox_buttoncontainer button
{
    background-image: url(ComboBox/images/toolkit-arrow.gif);
    background-position: top left;
    border: 0px none;
    height: 23px;
    width: 23px;
}
.AjaxToolkitStyle .ajax__combobox_itemlist
{
    border-color: #0F2543;
    background-color: #EFEFEF;
}

这是我所拥有的快照：

那么我该如何解决这个问题？

【问题讨论】：

标签： css asp.net-ajax ajaxcontroltoolkit

【解决方案1】：

使用

position: relative;
top: -7px;

在.AjaxToolkitStyle .ajax__combobox_inputcontainer .ajax__combobox_textboxcontainer input

相应地调整顶部

【讨论】：