替换选择标签的默认图标并单击下拉图标不会填充下拉列表

Question

我使用html标签有一段select代码。我需要使用新的segoe图标覆盖默认的下拉图标。我使用以下代码做到了这一点：

.select {
  border: 1px solid #ccc;
  overflow: hidden;
  height: 40px;
  width: 240px;
  position: relative;
  display: block;
}

select {
  height: 40px;
  padding: 5px;
  border: 0;
  font-size: 16px;
  width: 240px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.select:after {
  content: "\e0e5";
  font-family: segoe mdl2 assets;
  color: #000;
  padding: 12px 8px;
  position: absolute;
  right: 0;
  top: 0;
  background: red;
  z-index: 1;
  text-align: center;
  width: 10%;
  height: 100%;
  box-sizing: border-box;
}

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<label class="select">
    <select name="email" id="email">
        <option>aaaa1</option>
        <option>aaaa2</option>
        <option>aaaa3</option>
        <option>aaaa4</option>
        <option>aaaa5</option>
        <option>aaaa6</option>
    </select>
</label>

我的问题是，当单击新的下拉图标时，下拉列表没有填充。就像选择选项标签上的图标一样。我尝试使用z-index，但它将图标完全移回了原位。有人可以提供解决方案吗？

Answer 1

我找到了解决方案。通过添加CSS属性

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

除了上面所有的CSS属性外，它还可以工作。

Answer 2

您可以在自定义按钮上添加pointer-events: none;，以使onClick事件通过。

.select {
  border: 1px solid #ccc;
  overflow: hidden;
  height: 40px;
  width: 240px;
  position: relative;
  display: block;
}

select {
  height: 40px;
  padding: 5px;
  border: 0;
  font-size: 16px;
  width: 240px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.select:after {
  content: "\e0e5";
  font-family: segoe mdl2 assets;
  color: #000;
  padding: 12px 8px;
  position: absolute;
  right: 0;
  top: 0;
  background: red;
  z-index: 1;
  text-align: center;
  width: 10%;
  height: 100%;
  box-sizing: border-box;
  pointer-events: none; // Add this
}

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<label class="select">
    <select name="email" id="email">
        <option>aaaa1</option>
        <option>aaaa2</option>
        <option>aaaa3</option>
        <option>aaaa4</option>
        <option>aaaa5</option>
        <option>aaaa6</option>
    </select>
</label>

Answer 3

更改了一些CSS

select{
    height: 40px;
    padding: 5px;
    border: 0;
    font-size: 16px;
    width: 240px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    z-index:1; /*Add Z-index*/
    position:relative; /*Add Position*/
    background:transparent; /*Add Background*/
}
.select:after {
    content:"\e0e5";
    font-family: segoe mdl2 assets;
    color: #000;
    padding: 12px 8px;
    position: absolute;
    right: 0;
    top: 0;
    background: red;
    /*z-index:1;*/ /*Remove Z-index */
    text-align: center;
    width: 10%;
    height: 100%;
    box-sizing: border-box;
}

https://jsfiddle.net/yqmb3wxL/