HTML , CSS , 下拉箭头 , 选择答案

【问题标题】：HTML , CSS , Dropdown Arrow , SelectHTML , CSS , 下拉箭头 , 选择
【发布时间】：2015-04-08 21:34:50
【问题描述】：

我在这里创建了小提琴，它显示了选择和下拉箭头。

我的问题是箭头是使用 CSS 创建的并位于选择的顶部。但是点击箭头不会打开下拉菜单。

有没有办法像我们使用图像箭头时那样使用该 css 作为选择的背景。
或者是否可以模拟箭头点击的行为？

.selectClass {
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    -moz-appearance: none;
    border: none;
    width: 100px;
    background: #EEE;
    height: 30px;
    font-size: 20px;
    padding-left: 5px;
}
.dropDownArrow {
    position: relative;
    margin-left: 75px;
    margin-top: -20px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #555;
}

<select class="selectClass">
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
</select>
<div class="dropDownArrow"></div>

【问题讨论】：

> jsfiddle.net/sumant/tme6yyqq/1

标签： html css select

【解决方案1】：

到目前为止，最简单的解决方案是忽略鼠标在箭头上的点击，并使用pointer-events: none; 让点击“通过”。这是您的代码唯一需要的更改，请在此处查看：

.selectClass {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  -moz-appearance: none;
  border: none;
  width: 100px;
  background: #EEE;
  height: 30px;
  font-size: 20px;
  padding-left: 5px;
}
.dropDownArrow {
  pointer-events: none;
  position: relative;
  margin-left: 75px;
  margin-top: -20px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #555;
}

<select class="selectClass">
  <option>One</option>
  <option>Two</option>
  <option>Three</option>
</select>
<div class="dropDownArrow"></div>

【讨论】：

@PaulSmith，谢谢！我真的认为是时候让旧的 IE 版本消亡了，尤其是在它们自动更新的情况下...箭头作为选择背景图像。
glennnaessens.com/pointer-events-none-in-ie 无法完全理解这个想法。 @PaulSmith 您是否在 IE 上尝试过上述代码？
是的，它不适用于 IE 8、9 和 10，我担心它们仍然占据 30% 的市场份额 (netmarketshare.com)
这是一个相当大的数字，没想到。

【解决方案2】：

我会在两个元素周围创建一个带有背景颜色的父 div，将下拉箭头移动到选择标题后面，使该标题背景透明。这样您会看到箭头，但只单击顶部的选择元素框：

.dropDownArrow {
  position: absolute;
  left: 75px;
  top: 10px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #555;
}
.selectClass {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  -moz-appearance: none;
  border: none;
  width: 100px;
  background: transparent;
  height: 30px;
  font-size: 20px;
  padding-left: 5px;
  position: absolute;
}
.dropdownWrapper {
  position:absolute;
  width: 100px;
  height: 30px;
  background: #ddd;
}

<div class="dropdownWrapper">
  <div class="dropDownArrow"></div>
  <select class="selectClass">
      <option>One</option>
      <option>Two</option>
      <option>Three</option>
  </select>
</div>

【讨论】：