html - 使用图像绝对位置时使整个选择可点击

Question

我正在创建一个具有自己样式的选择。它有一个绝对位置的图像，它可以防止整个选择被点击。知道为什么会这样以及如何解决吗？

HTML

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <div class="flex items-center border-b border-jibuttonBlue py relative w-102">
        <select class="w-102 bg-jibackgroundGrey outline-none" name="">
            <option value="">January</option>
            <option value="">February</option>
        </select>
        <img src="{{MEDIA_UI}}/icon-white-bg-default.svg" alt="" class="absolute right-0 select-icon">
    </div>

CSS

select {
-webkit-appearance: none;
-moz-appearance: none;
}
.select-icon {pointer-events: none;}

Answer 1

select {
  -webkit-appearance: none;
-moz-appearance: none;
}

.select-icon {pointer-events: none;}

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
  <div class="flex items-center border-b border-jibuttonBlue py relative w-102">
            <select class="w-102 bg-jibackgroundGrey outline-none" name="">
              <option value="">January</option>
              <option value="">February</option>
            </select>
            <img src="{{MEDIA_UI}}/icon-white-bg-default.svg" alt="" class="absolute right-0 select-icon">
          </div>