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;
}

在ui-select框中删除箭头

1 个答案: