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

看一下这个

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

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

于 2013-09-20T06:52:44.527 回答
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 回答