CSS :后面和:在输入中生成的内容不可点击

Question

我在做一些不是我自己创造出来的代码。选择输入有一个自定义箭头图标，该图标使用CSS生成的内容应用于:a和:after伪扇区。

问题是，它们阻碍了它们后面的输入，所以当您单击它们时，不会单击输入。是否可以以这种方式使用CSS生成的内容，但可以单击整个输入？

http://codepen.io/anon/pen/dvAtJ

<div class="elem">
  <select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</div>
.elem {
  float: right;
}
.elem:before {
  content: "";
position: absolute;
right: 0px;
top: 0px;
height: 100%;
width: 30px;
background: #fff;
box-shadow: -6px 0 10px #FFF;
-moz-box-shadow: -6px 0 10px #FFF;
-webkit-box-shadow: -6px 0 10px #FFF;
}
.elem:after {
content: "";
border-top: 10px solid #ccc;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
position: absolute;
right: 10px;
top: 13px;
}
select {
  border: none;
}

Answer 1

您可以通过将select的background设置为transparent并在伪元素之上设置z-index来实现这一点。您也可能想要设置

-webkit-appearance: none; -moz-appearance: none; text-indent: 5px; text-overflow: '';

要删除webkit和mozilla的默认样式，请执行以下操作。检查我的密码。

http://codepen.io/davidicus/pen/vIbmG