I tried this: http://jsfiddle.net/ilyaD/KGcC3/
HTML:
try this :
select {
padding-left: 50% !important;
width: 100%;
}
I'm afraid this isn't possible with plain CSS, and won't be possible to make completely cross-browser compatible.
However, using a jQuery plugin, you could style the dropdown:
https://www.filamentgroup.com/lab/jquery-ui-selectmenu-an-aria-accessible-plugin-for-styling-a-html-select.html
This plugin hides the select
element, and creates span
elements etc on the fly to display a custom drop down list style. I'm quite confident you'd be able to change the styles on the spans etc to center align the items.
2020, Im using:
select {
text-align: center;
text-align-last: center;
-moz-text-align-last: center;
}
You can't really customise <select>
or <option>
much. The only way (cross-browser) would be to manually create a drop down with divs and css/js to create something similar.
I have always gotten away with the following hack to get it to work with css only.
padding-left: 45%;
font-size: 50px;
padding will center the text and can be tweaked for the text size :)
This is obviously not 100% correct from a validation point of view I guess but it does the job :)
It's not 100% yet, but you can use this snippet!
text-align-last: center; // For Chrome text-align: center; // For Firefox
Doesn't work on Safari or Edge, for now!