javascript - 无法单击选择框中的图标三 Angular 形

Question

我已经使用 Jquery 完成了自定义选择。我在右边放了一个三 Angular 形 FontAwesome 图标。问题是当我尝试单击图标时鼠标指针不允许我单击。图标占用的空间无法点击。我想知道我该如何解决这个问题，或者是否可以使用 css。

这是我的代码

$(function() {
  $('select').selectmenu();
});

.main-search-results:after {
  content: "\f0dd";
  font-family: 'FontAwesome';
  padding-left: 4%;
  border-left: 1px solid $text-color;
  position: absolute;
  top: 4px;
  right: 15px;
  z-index: 5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<div class="main-search-results">
  <select name="" id="select-filter-1">
    <option value="default">Cualquier provincia</option>
    <option value="a_coruña">A Coruña</option>
  </select>
</div>

Answer 1

给你，

我已经为你创建了 fiddle ，所以看看我在这里做了什么......

http://jsfiddle.net/mkdizajn/jsxuvkn6/

.w{
    position:relative;
}
.ui-selectmenu-button::after {
   content: "\f0dd"; 
   font-family: 'FontAwesome';
   position: absolute;
   top: 5px;
   right: 15px;
    width: 20px;
    height: 20px;
}
.ui-icon{
    display:none;
}

• 我将 FA 图标附加到生成的 jqueryUI 元素上..
• 删除(显示:无)初始下拉列表

我现在可以点击那个三 Angular 形，测试它是否适合你

第h, k