html - 使用自定义图标选择输入

Question

我有一个选择输入，并且已禁用默认浏览器外观，如下所示

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearence: none;
}

我想使用自定义箭头，以便展开和折叠以选择菜单。我尝试过各种 js 技巧，但没有一个真正有效。

我考虑过使用纯 css，使选择输入透明，z-index 2。因此，触发器将就位并显示为按钮。

这是jfiddle ，但我无法让它工作。

Answer 1

您可以尝试在选择框上设置背景。 ID 样式似乎不适用于选择框，因此您宁愿直接选择(如果您有多个选择框将它们包裹起来)。

    select {
      padding: 2px 2px 2px 2px;
      border: none; 
      background-image: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png");
      background-position: right center; /*Positioning*/
      background-repeat: no-repeat; /*Prevent showing multiple background images*/
    }

这样的东西可能会起作用，我以此为导向 fiddle我是由 this question 带来的。希望这会有所帮助。