1

デフォルトの ASP.NET ドロップダウンがあり、「国」の選択タグ ID でレンダリングされます。

ページの背景と一致するようにドロップダウンの背景を透明にしたいと思います。また、デフォルトの境界線も非表示にして、背景とうまく調和させたいと思います。リスト項目の背景は白にすることができます。ドロップダウンをクリックするために使用されるデフォルトの矢印の代わりに使用したいカスタム矢印の画像があります。

ドロップダウン リストの項目にカーソルを合わせると、項目の背景を黄色にして、フォントの色を常に黒にする必要があります。

これには可能な限り 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; }
4

2 に答える 2

1

これを試して。

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;
    }
于 2013-07-30T10:53:02.363 に答える
0

デフォルトの ASP.Net コントロールは、スタイリングに関して非常に制限されています。代わりに、JQuery UI ドロップダウンなどの外部コントロールを使用してみてください。

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

于 2013-07-30T10:28:50.220 に答える