Question

这是我的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

Answer 1

使用顶部和底部填充并移除高度以对齐中间的文本，如

。选择{ 填充：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;
}

Answer 2

无法对齐文本。有许多jquery插件可用，在这种情况下可能有用。

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

更新：你也可以在文本的开头添加＆amp; nbsp，虽然我不推荐它。

Answer 3

检查出来

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

此插件会隐藏select元素，并动态创建span个元素等，以显示自定义下拉列表样式。

将文本内部对齐下拉到中间

3 个答案: