0

I want to remove my default drop down arrow to new one:

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

I don't want to add properties of that class into new class and add that class to the label

May I know is it possible?

<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>
Capricorn
  • 2,061
  • 5
  • 24
  • 31
Jeff Dean
  • 157
  • 1
  • 1
  • 10
  • DO you want to add some new properties (without creating NEW Class) in new drop down? or it's simply with some values? – SolveProblem Aug 24 '18 at 08:53
  • @selah1936 from this icon a arrow down is comming, which I generally using on buttons, but the same arrow down I want to use it in my select arrow down icon instead of default one – Jeff Dean Aug 24 '18 at 08:59

1 Answers1

0

You can hide the default select arrow and add your own icon to the right of the select box.

Copied from 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 */
}

You can check how was it done here.

In your case. You could set the icon with base64, svg or maybe with after or before pseudo selectors.

With font-awesome you can do something like this. 

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

And adjust the position of the icon with maybe.

position: absolute; 
right: 0;
Gregor Ojstersek
  • 1,369
  • 7
  • 12
  • 1
    Hi Gregor, that was really great idea and i have implemented this, it is working but now the issue is the icon which is in dropdown selectbox at the right is not clickable, only icon , i think because it is overwriting the selectbox, ofcourse, if i get the solution i will let you know, thanks – Jeff Dean Aug 24 '18 at 10:01