CODEWITHSUNDEEP
htmlcsshtml-select
iJade
iJade

Reputation: 23791

align text inside drop down to middle

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

Upvotes: 3

Views: 12103

Answers (3)

Alex
Alex

Reputation: 996

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

Upvotes: 4

Arun Bertil
Arun Bertil

Reputation: 4638

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.

Upvotes: 0

bhb
bhb

Reputation: 2561

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.

Upvotes: 0

Related Questions