Question

我想将默认的下拉箭头删除为新的箭头：

<i class="icon-xyz-chevron down-rotation"></i>

我不想将该类的属性添加到新类中并将该类添加到标签中

我可以知道吗？

<label class="col-md-8 col-sm-8 col-xs-12">         
   <select class="template-drop-down custom-alert" ng-class="{'alert alert-danger': !$ctrl.formObject.visitors[$index].selectedPark && !$ctrl.formActionsObject.validateFormDetails}" ng-options="parkArea as parkArea.name for parkArea in $ctrl.formDataObject.parkAreas track by parkArea.code"
       ng-model="$ctrl.formObject.visitors[$index].selectedPark">
           <option value="parkArea.name"></option>
   </select>

   <span class="template-drop-down custom-alert-message" ng-if="!$ctrl.formObject.visitors[$index].selectedParkArea && !$ctrl.formActionsObject.validateFormDetails">
       <ng-message data-when="required" data-i18n-key="errors.selectedPark.required"></ng-message>
   </span>
</label>

Answer 1

您可以隐藏默认的选择箭头，并在选择框的右侧添加自己的图标。

从Siavas复制：

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Some browsers will not display the caret when using calc, so we put the fallback first */ 
  background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") white no-repeat 98.5% !important; /* !important used for overriding all other customisations */
  background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") white no-repeat calc(100% - 10px) !important; /* Better placement regardless of input width */
}

您可以检查here的情况。

以您为例。您可以使用base64，svg或在伪选择器之前或之后设置图标。

使用font-awesome，您可以执行以下操作。

select::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f007";
}

并用也许调整图标的位置。

position: absolute; 
right: 0;

如何用<i class =“ icon-xyz-chevron down-rotation”> </i>替换我的默认选择框下拉图标

1 个答案: