html - 样式 HTML 选择列表

Question

有一个带有圆形按钮的漂亮菜单，我想以同样的方式设置下拉列表的样式。尝试了很多不同的东西，但有两件事我需要一些帮助:
1.像其他按钮一样的圆 Angular 。
2.获得纯色，而不是动画外观。

这是一张显示按钮和下拉菜单的图片:

这是列表中的样式:

#topNav .right #categoryButton {
     margin-top:5px;
     border:3px solid #fff;
     background-color:#303030 ;
     text-transform:uppercase;
     color: #fff;
     height:50px;
     width:220px;
     outline: none;
}

Answer 1

查看 this great article关于选择下拉菜单的样式。但是存在一些限制，一些较旧的浏览器会以自己的方式呈现选择框。

它基本上涉及将选择包装在 div 中并设置 div 的样式:

.styled-select select {
   background: transparent;
   width: 268px;
   padding: 5px;
   font-size: 16px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;
   }

.styled-select {
   width: 240px;
   height: 34px;
   overflow: hidden;
   background: url(new_arrow.png) no-repeat right #ddd;
   border: 1px solid #ccc;
   }

<div class="styled-select">
  <select>
    <option>Here is the first option</option>
    <option>The second option</option>
  </select>
</div>