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

Question

这是在扼杀我。我有2个选择菜单，我需要将文本居中。我已尝试过各种text-align：center，margin：0 auto等。我不能使用填充，因为所有元素的名称都是不同的大小。有什么想法吗？

以下是使用选择下拉列表的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;文本对齐：中心; } select＆gt;选项{text-center！important; }

Answer 2

根据此回复https://stackoverflow.com/a/10813603/1949363，似乎无法在vanilla CSS中实现您所需的功能。上面提到的帖子建议使用jQuery插件作为选项，这听起来并不那么有趣。