Question

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

我的问题是箭头是使用CSS创建的，位于select的顶部。但点击箭头不会打开下拉列表。

有没有办法使用该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>

Answer 1

我将使用背景颜色围绕两个元素创建父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>

Answer 2

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

HTML，CSS，下拉箭头，选择

2 个答案: