更改ASP.NET下拉框的样式

Changing the style of ASP.NET Dropdown box

本文关键字：样式 ASP NET 更改      更新时间：2023-09-26

我有一个默认的ASP.NET Dropdown，它是用一个选择标记id"Countrys"呈现的。

我希望下拉列表的背景是透明的，以与页面的背景相匹配，还希望保持默认边框也消失，这样它与背景很好地融合在一起。列表项可以具有白色背景。我有一个自定义箭头的图像，我想使用它，而不是用于单击下拉列表的默认箭头。

将鼠标悬停在下拉列表项目上时，我希望项目的背景为黄色，字体颜色应始终为黑色。

我想尽可能多地使用CSS2.1，但如果它太复杂，那么我愿意使用javscript或jquery。

下面是呈现的标记，以及我一直在尝试编写的一些自定义样式。我还认为一些样式被一些默认样式覆盖了。如有任何帮助，我们将不胜感激。感谢

<select name="ContriesDropdown" class="Select.SmallSelect" id="Countries" style="width: 100px; background-color: white;" onblur="try{FormUtils_ElementErrorReset(this);}catch(e){}" onchange="Send(this.value);">
<option value="1">Country1
<option value="2">Country2
*CustomCss*
#Countries {   position:absolute; display:inline; top:6px;}
#Countries {background-color:transparent; vertical-align: middle; color: #44586D; border: 0px transparent; display: inline;padding:2px;}
#Countries Option:hover { color:black; background-color:Yellow; }

试试这个。

select
    {
        -webkit-appearance: button;
        -webkit-border-radius: 2px;
        -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
        -webkit-padding-end: 20px;
        -webkit-padding-start: 2px;
        -webkit-user-select: none;
        background-image: url(../images/select-arrow.png), -webkit-linear-    gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
        background-position: center right;
        background-repeat: no-repeat;
        border: 1px solid #AAA;
        color: #555;
        font-size: 10pt;
        margin: 0;
        overflow: hidden;
        padding-top: 2px;
        padding-bottom: 2px;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-family: Cambria;
    }

默认的ASP.Net控件在样式方面非常有限。您应该尝试使用外部控件，如JQuery UI下拉列表。

http://jqueryui.com/autocomplete/#combobox

相关文章：