javascript - 在选择中对齐文本中心

Question

我目前已经为自己制作了一个风格不错的选择框:

http://jsfiddle.net/B2rS6

但是，如果我将宽度设置得比相对宽度长，或者有一个非常长的选项，如下所示，文本将不会居中。

<option>This is a really long option that will distort the width of the selections</option>

有没有一种方法可以设置它的样式，使其在跨浏览器的选择中居中放置文本？我不在乎它是 javascript 还是 css。只需要一些有用的东西。

Answer 1

我认为*您可以实现此目的的唯一方法是使用插件，我碰巧知道一个很棒的插件:http://formstone.it/components/selecter

普通的选择框很难设置样式……很快我们就可以使用声名狼藉的 Shadow DOM 来做到这一点。这是添加了 JS 功能的普通选择菜单(感谢 Ben Plum)。

“资源”里有外部文件，随意抓取

http://jsfiddle.net/wChTk/

    <div class="row">
        <div class="col50">
            <select>
                <option value="de_DE-test">Category 1</option>
                <option value="en_US-test">Category 2</option>
                <option value="es_ES-test">Category 3</option>
                <option value="es_MX-test">Category 4</option>
                <option value="fr_FR-test">Category 5</option>
                <option value="fr_CA-test">Category 6</option>
                <option value="it_IT-test">Category 7</option>
                <option value="pt_BR-test">Category 7</option>
                <option value="sv_SE-test">Category 7</option>
                <option value="zh_CN-test">Category 7</option>
            </select>
        </div>
    </div>

希望对您有所帮助!