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

这简直要了我的命。我有两个选择菜单，我需要中心的文字。我尝试过各种文本对齐：居中、边距：0自动等。我不能使用填充，因为所有元素的名称大小都不同。有什么想法吗

下面是生成select下拉列表的rails代码片段

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

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

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

它可能与：

---

选择{width:400px；text align:center；}select>选项{text center！important；}

基于此响应，似乎无法实现您在普通CSS中所需的功能。上面提到的帖子建议使用jQuery插件作为选项，这听起来并不那么有趣。

浏览器极大地限制了我们可以在select和option标签上执行的样式设置。我想将其居中，而不仅仅是在侧面添加填充，因为许多餐厅名称的大小不同。选择{宽度：400px；文本对齐：中心；}选择>选项{文本中心！重要；}或选择>选项{文本中心！重要；}更改选项{文本中心！重要；}它提供了什么服务？你有什么问题吗？

<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;
    }
   }
 }