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

这是杀了我。我有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