2

ここでクラスと例

    <asp:DropDownList ID="dropDownListZenithYesNo" 
    CssClass="dropDownBox" runat="server"></asp:DropDownList>

そして、ここでそのドロップダウンリストの CSS クラス

.dropDownBox
{
    font-size: 13px;
    color: #3b3b3b;
    padding: 5px;
    background: -moz-linear-gradient(
    top,
    #f0f0f0 0%,
    #d6d6d6);
    background: -webkit-gradient(
    linear, left top, left bottom, 
    from(#f0f0f0),
    to(#d6d6d6));
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #999999;
    -moz-box-shadow: 0px 1px 2px rgba(000,000,000,0.5), inset 0px 1px 0px rgba(255,255,255,1);
    -webkit-box-shadow: 0px 1px 2px rgba(000,000,000,0.5), inset 0px 1px 0px rgba(255,255,255,1); 
    box-shadow: 0px 1px 2px rgba(000,000,000,0.5), inset 0px 1px 0px rgba(255,255,255,1);
     text-shadow: 0px 1px 0px rgba(255,255,255,1), 0px 1px 0px rgba(255,255,255,0);
}

そして、クリックして要素を表示しないと、見栄えがよくなります

ここに画像の説明を入力

そして、これは、要素をクリックして表示すると、非常に見栄えが悪いことです

ここに画像の説明を入力

Windows 7 firefox 最新バージョンでのテスト

CSS CSS3 HTML ドロップダウン リストの色スタイル

4

2 に答える 2

3

css の下に次の css を追加します。

.dropDownBox option
    {
        font-size: 13px;
        color: #3b3b3b;
        padding: 5px;
        background: -moz-linear-gradient(
top,
#f0f0f0 0%,
#d6d6d6);
        background: -webkit-gradient(
linear, left top, left bottom, 
from(#f0f0f0),
to(#d6d6d6));
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        border: 1px solid #999999;
        -moz-box-shadow: 0px 1px 2px rgba(000,000,000,0.5), inset 0px 1px 0px rgba(255,255,255,1);
        -webkit-box-shadow: 0px 1px 2px rgba(000,000,000,0.5), inset 0px 1px 0px rgba(255,255,255,1);
        box-shadow: 0px 1px 2px rgba(000,000,000,0.5), inset 0px 1px 0px rgba(255,255,255,1);
        text-shadow: 0px 1px 0px rgba(255,255,255,1), 0px 1px 0px rgba(255,255,255,0);
    }

ただし、結果が異なる可能性があるため、複数のブラウザーでページをテストしてください。実際、私は異なる結果を持っています。

于 2012-12-11T18:29:05.217 に答える
1

デフォルトのスタイルを継承している必要があります。オプションの色を指定することをお勧めします。

.dropDownBox option{
    font-size:1.2em;
    background-color:#FF0 !important;
    display:block;
}

ここにフィドルがあります

于 2012-12-11T18:30:49.423 に答える