3

これが私のhtmlです

  <select id="ddlCountry" placeholder="optional" class="select" title="Select Country">
 <option value="0">country</option>
</select>

ここにCSSがあります

    .select
{
    width: 224px;
    border: none;
    font: normal 14px/16px "HelveticaNeueLTCom45Light" , Georgia,serif;
    display: block;
    float: none;
    height: 32px;
    margin-top: 9px;
    border:1px solid;
    color: #6d6e71;
    padding: 0px 4px 0px 4px;
    background: url(../images/selectbg.png) no-repeat right 9px #fff;
    -webkit-appearance: none;
}

問題は、ドロップダウン内のテキストが Mozilla では上に配置されているのに、他のブラウザーでは完全に中央に配置されていることです。すべてのブラウザでテキストをドロップダウンの中央に揃える方法。

ここにjsfiddleがあります

4

3 に答える 3

4

上下のパディングを使用し、高さを削除して、テキストを中央に揃えます。

.select{ パディング: 4px; }

更新された CSS は次のようになります。

.select{
    width: 224px;
    border: none;
    font: normal 14px/16px "HelveticaNeueLTCom45Light" , Georgia,serif;
    display: block;
    float: none;
    margin-top: 9px;
    border:1px solid;
    color: #6d6e71;
    padding: 4px;
    background: url(../images/selectbg.png) no-repeat right 9px #fff;
    -webkit-appearance: none;
}
于 2013-09-20T06:52:02.387 に答える
0

テキストを揃えることはできません。この場合に役立つ多くの jquery プラグインが利用可能です。

http://www.jquery4u.com/plugins/10-jquery-selectboxdrop-down-plugins/ http://tympanus.net/Development/SimpleDropDownEffects/index.html

更新: テキストの先頭に   を追加することもできますが、お勧めしません。

于 2013-09-20T06:51:55.930 に答える
0

これをチェックしてください

http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

このプラグインはselect要素を非表示にし、その場で要素などを作成spanして、カスタム ドロップダウン リスト スタイルを表示します。

于 2013-09-20T06:52:44.527 に答える