Центрирование текста в `<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. (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; 
} 

ЯШ:

$('.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/