样式选择菜单

Question

是否可以设置＆lt; select＆gt;的样式菜单如下图所示：

这是我一直在努力的小提琴，但无法正确理解箭头。

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

是否可以设置＆lt; select＆gt;的样式像这样的菜单？

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;

这应该可以解决问题。

演示：Select Demo