在ui-select框中删除箭头

时间:2017-12-08 22:43:00

标签: css angularjs ui-select

在我的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中,无论如何。

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

1 个答案:

答案 0 :(得分:1)

死简单:)

.caret {
  display: none;
}