样式HTML选择列表

Question

有一个带有圆形按钮的漂亮菜单，我想以同样的方式设置下拉列表的样式。尝试了很多不同的东西，但我需要一些帮助：
1。像其他按钮一样圆角。
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中并设置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>

Answer 2

你做不到。你必须建立自己的选择元素。

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

  

首先，尝试一切你   可以做到没有必要。默认表单元素是熟悉的   工作得很好。制作下拉菜单可以匹配您的字体和颜色   品牌通常不是必需品，更有可能是令人讨厌的   最坏的用户体验。

     

如果你认为定制一个绝对是个好主意   下拉列表，那么你应该使用JavaScript来：

     

  
1. 可以隐藏原始选择。
  
2. 使用自定义重建select   标记（可能是定义列表），您可以按照自己的方式设置样式。
  
3. 复制默认选择的所有功能，即   包括：键盘事件，如向上和向下箭头键并返回   选择，滚动长列表，选择时向上打开菜单   仅举几个例子，它就是屏幕的底部。
  

还有一些步骤可以容纳不同的客户端设置和链接的教程以获取更多信息。