html - 样式选择菜单

Question

是否可以像下图那样设置菜单的样式:

这是我一直在研究的 fiddle ，但无法使箭头正确。

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;
}

是否可以像这样设置

菜单的样式？

Answer 1

您需要做的基本上是将它们都向左浮动并清除它们的右侧，如下所示

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

这将使它们靠得更近。另外你不应该使用 <p>选择框旁边的标记。将箭头放在 div 中而不是没有理由不这样做，当你 float 它们时它也会删除空间。这样做只是更清晰的编码。