Question

我正在研究一些我自己没有创建的代码。选择输入有一个自定义箭头图标，设计用CSS生成的内容应用于：之前和之后：Pseudo sector。

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

<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

CSS：after和：在输入中生成的内容不可点击之前

1 个答案: