具有自定义样式的html下拉列表

Question

如何彻底改变元素的设计？我试图像下面的图像一样下拉，我写的是

<select>
 <option value="0">Title</option>
  <option value="1">Mrs</option>
  <option value="2">Mr</option>
</select>

我陷入了将自定义图片放入下拉列表以及如何设置选择元素

的样式

Answer 1

一些表单元素众所周知难以单独使用CSS进行样式设置，并且在所有浏览器中仍然在视觉上看起来相同。

建议选择SELECT元素的做法通常是使用javascript解决方案，因为它可以跨浏览器工作。

看看克里斯科伊尔关于此的文章： http://css-tricks.com/dropdown-default-styling/

Answer 2

您无法以您描述的方式设置select等元素的样式。像背景颜色或边框这样的东西是可能的。

使用CSS进行样式化可能会像这样：

select {
    border-radius: 5px;
    color: lightgrey;
    font-weight: bold;
}

使用此CSS，您将获得圆角并更改字体。

什么是不可能的：

• 更改图标
• 更改下拉框的背景或字体

尝试摆弄javascript，嵌套div和隐藏的input字段。另外一瞥http://jqueryui.com可以帮到你很多。