Question

我目前为自己制作了一个很棒的选择框：

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

<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）。

＆＃34;资源＆＃34;中包含外部文件，随时抓取

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>

我希望这有帮助！

Answer 2

使用CSS。设置width和text-align

JSFiddle

我现在阅读了一些文档......并且害怕，用纯CSS不可能。您可以使用某些人在this post中推荐的内容并重新设计

Answer 3

为select

设置text-align: center;

在“选择”中对齐文本中心

3 个答案: