Question

我正在尝试重叠HTML元素前面的图像，以便我可以模拟具有不同的箭头图标。我成功地实现了这一点，但即使我能够点击选择器的“文本”区域，如果我点击自定义图像的顶部（因为它位于顶部并与之无关），显然没有任何反应。我需要让它仅适用于IE10，虽然我在Chrome中尝试过但也无法正常工作。

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

这是我的代码的小提琴。为简单起见，我已替换仅background-color: red

的图片网址

Fiddle

以下是完整代码：

<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>

Answer 1

您可以通过CSS :after伪元素

来完成

HTML

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

CSS

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

如何在图像重叠时打开<select> </select>

1 个答案: