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

這是殺了我。我有2個選擇菜單，我需要將文本居中。我嘗試過各種文本對齊：中心，邊距：0自動等。我不能使用填充，因爲所有元素的名稱是不同的大小。有什麼想法嗎？如何在選擇下拉菜單中居中文本，設置下拉式樣並添加向下箭頭？

下面是一段使選擇下拉菜單的代碼。

<%= 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後添加了哪些元素。這裏是理想的我怎麼會喜歡這個網站看看：

enter image description here