2

したがって、次のような HTML の単純なドロップダウン メニューがあります。

<select name="menu" class="menu">
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
</select>

そして、私はこのCSSでスタイリングしています:

.menu {
    font-size: 10px;
    font-family: Arial, sans-serif;
    padding-top: 2px;
    position: relative;
    bottom: 2px;
    outline: none;
    border-bottom-width: 1px !important;
    border-top-style: none !important;
    border-right-style: none !important;
    border-bottom-style: solid !important;
    border-left-style: none !important;
    border-bottom-color: #999 !important;
    width:200px;
    -webkit-border:0;
    -webkit-appearance: button;
}

これは、Firefox と Internet Explorer で希望どおりにレンダリングされます。ドロップダウン メニューには、下部のみに沿って 1 ピクセルの境界線があり、右側にドロップダウン メニュー ボタン (小さな下向き矢印の付いた灰色のボタン) があります。

ただし、Chrome やその他の WebKit ブラウザー (Safari など) では、ボタンは表示されません。

私はルールをいじくり回し、 http://css-infos.net/property/-webkit-appearance-webkit-appearanceにあるプロパティをいじりましたが、ほとんど成功しませんでした。

  • このルールがない場合、ドロップダウン メニューはボックスで囲まれ、右側にボタンが表示されます。

  • このルールでは、ドロップダウン メニューは下部に沿って 1 ピクセルの境界線だけでレンダリングされますが、右側にはボタンはありません。

私の質問は、このドロップダウン メニューを Firefox と同じように Chrome でレンダリングするにはどうすればよいですか? 右側にボタンがあり、下部に 1 ピクセルの境界線が 1 つだけありますか?

ここに jsFiddle があるので、自分で確認できます: http://jsfiddle.net/tkFpe/3/

4

2 に答える 2

3

適切なドロップダウンメニューを作成するには、境界線をすべて白で、下を他の色で使用できます。このフィドルjsfiddle.net/LGwEd/3を確認してください。

.menu { 
    font-size: 10px; 
    font-family: Arial, sans-serif; 
    padding-top: 2px; 
    position: relative; 
    bottom: 2px; 
    outline: none; 
    width:200px; 
    border:0; 
    appearance: menulist-button; 
}
于 2013-03-12T11:13:26.493 に答える
0

-webkitの部分を削除し、border：0とappearance：buttonだけを使用します。

これにより、Chrome 25.0とSafari：6.0.2を使用して動作するようになりました

于 2013-03-12T11:09:24.800 に答える