How to change ion-select dropdown

Ionic Framework
1

Is there a way to change this image https://imgur.com/a/f8HVdlz (edited)

on ion-select (edited)

to something like this https://imgur.com/a/GOihXRK (edited) ?

I don’t even think it’s an image, it looks like a div, but replacing it with an image would be cool since it easier than styling a div.

2

Mmm, not really. Since that arrow is part of shadowDOM, there’s no public API to change it. Honestly, I think it is better to keep the icon, as it follow consistent UI patterns that have been established on ios/android.

1 Like
3

Does it HAVE to be an ion-select?

There are a few options using CSS, Angular Material etc, at least if nothing else for ideas on the how.
some are Nasty tricks. Simply pointing you to some ideas, concepts. See what works for you and flavour to taste.

https://codepen.io/vkjgr/pen/VYMeXp

https://stackblitz.com/edit/angular-e7twlq-qboini

https://fabriceleven.com/design/clever-way-to-change-the-drop-down-selector-arrow-icon/

I had similar, but more “complexity” from UI team.
I used Popover, iOS style and a list, setup in a component.
Drop-down arrow from newicon set, onClick().
Job done, works like a charm and capable of VERY rich content in the “select-options”.

4

Simple, Just put following css :

HTML:

Designation
Role 1
Role 2
Role 3

CSS:
ion-select {
background-image: url(assets/images/custom_arrow_icon.svg);
background-repeat: no-repeat;
background-position: right;
}
ion-select::part(icon) {
display: none !important;
}