样式HTML选择列表

有一个圆形按钮的漂亮菜单，我想用同样的方式设计下拉列表。尝试了很多不同的事情，但有两件事我需要一些帮助：
一,。圆角和其他按钮一样。
二,。获得纯色，而不是动画外观

以下是显示按钮和下拉列表的图片：

以下是列表中的样式：

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

---

你不能那样做。您必须构建自己的select元素

从这个讨论“如果您想要完整的设计控制怎么办？”

首先，尝试你想要的一切 我可以不必这样做。默认的表单元素是熟悉的，并且 工作顺利。使下拉菜单与您的字体和颜色匹配 品牌通常是不必要的，充其量也可能是令人讨厌的 最坏的情况是糟糕的用户体验

如果您认为定制一个 下拉列表，然后您应该使用JavaScript来：

可以方便地隐藏原始选择

使用“自定义”重新生成“选择” 标记（可能是一个定义列表），您可以根据需要设置样式

复制默认选择所具有的所有功能 包括：键盘事件，如上下箭头键和返回 选择，滚动长列表，选择时向上打开菜单 在屏幕的底部，举几个例子

还有几个步骤可以适应不同的客户端设置，还有一个教程链接以获取更多信息。

请查看有关设置select下拉列表样式的信息。但是也有一些限制，一些较旧的浏览器会以自己的方式呈现选择框

它主要涉及在div中包装select并设置div的样式：

.styled选择{
背景：透明；
宽度：268px；
填充物：5px；
字体大小：16px；
线高：1；
边界：0；
边界半径：0；
高度：34px；
-webkit外观：无；
}
.样式选择{
宽度：240px；
高度：34px；
溢出：隐藏；
背景：url（new_arrow.png）无重复右#ddd；
边框：1px实心#ccc；
}

这是第一个选择
第二种选择

也许这个问题（及其答案）也是您正在寻找/希望找不到的答案：要很好地回答这个问题，您必须知道支持哪些浏览器。