删除 ui-select 框中的箭头

Question

在我的 AngularJS 应用程序中，我想从 ui-select 框中删除默认箭头。

      <ui-select
        class="ui-select-no-arrow"
        ng-model="$ctrl.workoutHours"
        ng-change="$ctrl.updateHours($ctrl.workoutHours)"
        input-type="number"
        style="width: 3.5em"
        theme="bootstrap"> 
        <ui-select-match>{{ $ctrl.workoutHours }}</ui-select-match>
        <ui-select-choices
          repeat="hour in $ctrl.getHours($select.search) | filter: $select.search">
          {{ hour }}
        </ui-select-choices>
      </ui-select>

根据 Stack Overflow 上类似问题的回答，我尝试了以下方法：

.ui-select-no-arrow {
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: '';
}

同时更新 ui-select 元素上的类。这根本没有做任何事情，但如果我更改为并执行以下 CSS：

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: '';
}

这确实摆脱了箭头。无论如何，至少在 Chrome 和 Firefox 中是这样。

我需要做什么才能摆脱箭头而不是仅仅？

Answer 1

很简单:)

.caret {
  display: none;
}