在 '' 元素中居中文本 <option>(Webkit 和 IE)

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。（小提琴）

如何在 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/