样式选择菜单

Question

是否可以将菜单样式设置为以下图片： 我一直在开发这个jsfiddle但是无法正确地显示箭头。 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>菜单样式化成这样吗？

- Mdd

---

我编辑了问题并添加了一张图片，希望能更清晰地表达。 - Mdd

我认为你想要的是这样的：http://bavotasan.com/2011/style-select-box-using-only-css/ - drneel

谢谢您，drneel！在我的搜索中我还没有遇到过那个网站，但它看起来很有前途。我会试一试。 - Mdd

这是一个用于稍后提交的表单选择框吗？还是您将选择用作下拉菜单，当用户单击选项时会发生某些事情？如果是后者，您可以使用其他元素来实现此功能，并根据需要进行样式设置。 - 3dgoo

你能提供一下示例图片的链接吗？ - Shahriar Kabir

Answer 1

你需要做的是将它们都向左浮动，并清除它们的右侧，具体操作如下：

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

这将使它们靠得更近。此外，您不应该在选择框旁使用<p>标签。相反，将箭头放在一个div中，没有理由不这样做，当您将它们浮动时，它将删除空格。这样做只是更清晰的编码方式。

- Epik

---

抱歉，这不是我想要解决的问题。我更新了问题并提供了一张图片来说明我一直在努力实现的内容，对我最初发布的问题不够清晰表示歉意。我看到网络上有很多关于尝试样式化选择菜单的内容，但没有什么真正帮助到我。感谢你迄今为止的帮助。 - Mdd

Answer 2

你可以将以下代码添加到你的CSS中：

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

那应该就可以了。

演示：选择演示

- Bryan CS