如何在选择下拉菜单中居中放置文本，设置下拉菜单的样式并添加向下箭头？

Question

这真杀了我。 我有2个选择菜单，需要将文本居中。 我尝试了多种文本对齐方式：居中，页边距：0自动等。由于所有元素的名称均大小不同，因此无法使用填充。 有什么想法吗？

这是使选择下拉菜单的rails代码。

<%= collection_select(:id, :name, @restaurants, :id, :name, prompt: "select a restaurant") %>

这是用html生成时的代码。

<select id="id_name" name="id[name]"><option value="">select a restaurant</option>
  <option value="5">Jamba</option>
  <option value="4">Smokey Joes</option>
  <option value="3">Arbys</option>
  <option value="1">McDonalds</option>
<option value="2">Burger King</option></select>

当前样式。 每次我尝试设置选项样式时，它什么都不做。

.filters{
  height: auto;
  margin: 0 auto;
  overflow: hidden;
  padding-bottom: 10px;
  width: 280px;
  select {
    background-color: rgba(255,255,255,0.71);
    background:-webkit-linear-gradient(bottom,rgba(255,255,255,0.71) 71%, rgba(255,255,255,0.71) 71%);
    background:-o-linear-gradient(bottom,rgba(255,255,255,0.71) 71%, rgba(255,255,255,0.71) 71%);
    background:-moz-linear-gradient(bottom,rgba(255,255,255,0.71) 71%, rgba(255,255,255,0.71) 71%);
    border: 1px solid #fff;
    border-radius: 0;
    color: #553705;
    font-size: 18px;
    height: 48px;
    margin-top: -4px;
    padding: 10px 5px;
    width: 100%;
    -webkit-appearance: none;
    &:hover{
       cursor: pointer;
    }
   }
 }

我还需要在select中添加一个下拉箭头，但不确定将：after放在哪个元素上。 理想情况下，这是我希望该站点的外观：

关于样式选项的任何其他想法也将不胜感激。 现在，当我打开它时，它会稍微向侧面打开。 这是一张照片

Answer 1

其可能与：

选择{width：400px; 文本对齐：中心; }选择>选项{text-center！important; }

Answer 2

基于此响应https://stackoverflow.com/a/10813603/1949363 ，似乎无法在原始CSS中实现所需的功能。 提到的文章建议使用jQuery插件作为选项，听起来并不那么有趣。