如何在選擇下拉菜單中居中放置文本，設置下拉菜單的樣式並添加向下箭頭？

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插件作為選項，聽起來並不那么有趣。