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带来的{{3}}。希望这会有所帮助。

使用自定义图标选择输入

1 个答案: