Javascript 如何打开<；选择>；当图像重叠时

我试图在HTML元素前面重叠一个图像，这样我就可以模拟有一个不同的箭头图标。我成功地做到了这一点，但是，即使我能够单击选择器的“文本”区域，如果我单击自定义图像的顶部，显然什么也不会发生（因为它位于的顶部，并且与它无关）。我需要使它只适用于IE10，虽然我在Chrome上试过，但也不起作用

我做了一些研究，似乎在图像上附加一些JS来打开选择器选项是很困难的，如果不是不可能的话，特别是对于IE。作为一项单独的工作，我尝试为图像节点设置一个较低的z索引，这样鼠标单击事件将忽略图像并直接进入节点，但没有起作用。我想看看是否有人会有另一个想法，或者这实际上是不可能实现的

这是我代码的提琴。为简单起见，我将图像URL替换为背景色：红色

以下是完整的代码：

<style type="text/css">

.styled-select {
   width: 240px;
   overflow: hidden;
   position: relative;
}

.styled-select select {
   width: 268px;
   z-index: 5;
   background-color: transparent;
}

.imageNode {
   background-color: red;
   position: absolute;
   right: 0px;
   top: 2px;
   height: 32px;
   width: 32px;
   overflow: hidden;
   z-index: 3;
}

</style>



<div class="styled-select">
   <select>
      <option>Here is the first option!!!!!!!!!!</option>
      <option>The second option</option>
      <option>Third option!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</option>
   </select>

   <div class="imageNode"></div>
</div>

.样式选择{
宽度：240px；
溢出：隐藏；
位置：相对位置；
}
.样式选择{
宽度：268px；
z指数：5；
背景色：透明；
}
.imageNode{
背景色：红色；
位置：绝对位置；
右：0px；
顶部：2个；
高度：32px；
宽度：32px；
溢出：隐藏；
z指数：3；
}
这里是第一个选择！！！！！！！！！！
第二种选择
第三种选择！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

您可以通过

CSS:after

伪元素来完成

html

---

这么多感叹号！！！！！！！！！！！！！！！！！！！！！！！！！！！！这些总是一个问题。有很好的xbrowser解决方案。是一个很好的工具，jqueryui。谢谢，我不确定我们是否想要一个完整的库来实现这个功能，但这可能是唯一的解决方案。我会查出来的！谢谢你的回答。然而，我在JSFIDLE（chrome和IE10）上尝试了这一点，但没有成功。挑战在于单击箭头并打开选项。此外，箭头必须是图像（在我提供的示例中，它是红方块）。

<div class="custom-select">
<select>
<option>a</option>
<option>b</option>
<option>c</option>
</select>
</div>

div.custom-select {
position: relative;
display: inline-block;
  }

.custom-select select {
display: inline-block;
padding: 4px 3px 3px 5px;
margin: 0;
font: inherit;
outline:none; /* remove focus ring from Webkit */
line-height: 1.2;
background: #000;
color:white;
border:0;
}

/* Select arrow styling */
.custom-select:after {
content: "▼";  /* Current arrow I would like to change */
position: absolute;
top: 0;
right: 0;
bottom: 0;
font-size: 60%;
line-height: 30px;
padding: 0 7px;
background: #000;
color: white;
}

.no-pointer-events .custom-select:after {
content: none;
}