align text inside drop down to middle

Question

Here is my html

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

Here is the 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;
}

The issue is the text inside the drop down is aligned to top in Mozilla but looks perfect and aligned to middle in other browsers. Any way to align text to middle of drop down in all browsers.

Here is the jsfiddle

have a look here http://stackoverflow.com/questions/10813528/is-it-possible-to-center-text-in-select-box — BeNdErR, Sep 20 '13 at 06:51

Alex · Accepted Answer · 2013-09-21T13:41:22.250

Use top and bottom padding and remove height to align the text in the middle, like

.select{ padding: 4px; }

Your updated CSS would be

.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;
}

score 0 · Answer 2 · answered Sep 20 '13 at 06:51

Its not possible to align the text. There are many jquery plugins avaiable which might be useful in this case.

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

Update: You can also add &nbsp at the beginning of the text, although i wouldn't recommend it.

score 0 · Answer 3 · answered Sep 20 '13 at 06:52

0

Check this out

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

This plugin hides the select element, and creates span elements etc on the fly to display a custom drop down list style.

answered Sep 20 '13 at 06:52

Arun Bertil

4,598
4
33
59

align text inside drop down to middle

3 Answers3