html - 风格选择菜单

Question

是否可以像下图那样设置 <select> 菜单的样式：

这是我一直在研究但无法正确箭头的小提琴。

http://jsfiddle.net/nmpxj/

这是HTML：

<select>
  <option>Alabama</option>
  <option>Alaska</option>
</select>

这是CSS：

select {
background: -webkit-linear-gradient(#C9C9C9, #CCC);
background: -moz-linear-gradient(#C9C9C9, #CCC);
border: 1px solid #ccc;
color: white;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);    
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
padding:10px;
}

是否可以像这样设置 <select> 菜单的样式？

Answer 1

你需要做的方式基本上是把它们都向左浮动并清除它们的权利，如下所示

select { float:left; clear:right; }
div { float:left; clear:right; }

这会将它们推到一起。此外，您不应该使用<p>选择框旁边的标签。将箭头放在 div 内，没有理由不这样做，当您浮动它们时它也会删除空间。这样做只是更简洁的编码。

Answer 2

您可以将其添加到您的 CSS：

width: auto;  
background: url('http://cdn1.iconfinder.com/data/icons/picol/icons/arrow_sans_down_32.png') no-repeat right;

这应该够了吧。

演示：选择演示