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

Question

我怎样才能完全改变一个元素的设计？我正在尝试像下图一样制作下拉菜单，我写的是

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

我被困在放置自定义图像以打开下拉列表的下拉列表以及如何设置选择元素的样式

Answer 1

众所周知，某些表单元素很难单独使用 CSS 来设置样式，并且在所有浏览器中仍然看起来相同。

样式化 SELECT 元素的推荐做法通常是使用 javascript 解决方案，因为这将跨浏览器工作。

看看 Chris Coyle 的文章： http ://css-tricks.com/dropdown-default-styling/

Answer 2

您不能select以您描述的方式对元素进行样式设置。背景颜色或边框之类的东西是可能的。

仅使用 CSS 进行样式设置可以像这样：

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

使用此 CSS，您将拥有圆角和更改字体。

什么是不可能的：

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

尝试摆弄 javascript、嵌套divs 和隐藏input字段。浏览一下http://jqueryui.com 也会对您有很大帮助。