Question

我有一个<select>元素：

<select>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

我给它一个宽度并以它为中心：

select {
    width: 400px;
    text-align: center;
}

中心只发生在Firefox中，而不是Webkit或IE。（Fiddle）

如何将选项集中在Webkit和Internet Explorer中？

Answer 1

根据我的知识，我建议您创建自己的类似选择元素，而不是尝试将选择按钮作为解决方法的中心。你可以使用javascript（jQuery在这里，你仍然可以使用纯javascript，这将是一个更快的代码）。

html：

<div class="dropdown">
    <div class="dropdown-title">Dropdown menu</div>

    <div class="dropdown-menu">
        <div class="option">Option 1</div>
        <div class="option">Option 2</div>
    </div>

    <input type="hidden" class="dropdown-select" />
</div>

css：

.dropdown-title {
    padding: 5px;
    border: 1px solid black;
}
.dropdown-menu {
    display: none;
}
.option {
    border: 1px solid grey;
    text-align: center;
    padding: 3px;
}

js：

$('.dropdown-title').on('click', function() {
    $(this).next('.dropdown-menu').toggle();
});
$('.option').on('click', function() {
    $(this).closest('.dropdown-menu').hide();
    $(this).parents('.dropdown').find('.dropdown-title').html($(this).html());
    $(this).parents('.dropdown').find('.dropdown-select').val($(this).html());
});

在这种情况下使用jQuery：http://jsfiddle.net/U44Yr/

将文本置于`<option>`元素（Webkit＆amp; IE）</option>中

1 个答案: