样式选择菜单

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 内，没有理由不这样做，并且当您浮动它们时，它也会删除空间。这样做只是更干净的编码。