删除 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 元素上的 class。那根本没有做任何事情，但是如果我更改为并执行以下操作 CSS:

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

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

我需要做什么才能去掉 in 而不是仅仅去掉箭头？

Answer 1

非常简单:)

.caret {
  display: none;
}

删除 ui-select 框中的箭头

Removing arrow in ui-select box

css

angularjs

ui-select