我想删除默认下拉箭头到新的箭头:
<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>
您可以隐藏默认的选择箭头,并在选择框的右侧添加您自己的图标。
复制自西亚瓦斯:
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 */
}
你可以在这里查看它是如何完成的。
在你的情况下。您可以使用 base64、svg 或伪选择器之后或之前设置图标。
使用font-awesome,您可以做这样的事情。
select::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "f007";
}
并调整图标的位置与也许。
position: absolute;
right: 0;