[英]Changing the style of ASP.NET Dropdown box
我有一個默認的ASP.NET Dropdown,它的選擇標記ID為“Countries”。
我希望下拉列表的背景是透明的,以匹配頁面的背景,並且還希望使默認邊框也消失,因此它與背景很好地融合在一起。 列表項可以具有白色背景。 我有一個我想使用的自定義箭頭的圖像,而不是用於單擊下拉列表的默認箭頭。
將鼠標懸停在下拉列表項上時,我希望項目的背景為黃色,字體顏色應始終為黑色。
我想盡可能多地使用CSS 2.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; }
在樣式方面,默認的ASP.Net控件非常有限。 您應該嘗試使用外部控件,例如JQuery UI下拉列表。
嘗試這個。
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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.