[FIXED] How to remove small caret from ion-select in ionic4

Issue

I want to remove the inbuilt grey small caret from ion-select, and use my
custom caret(arrow) instead.

Code:

ion-select {
  color: grey;
  background:url("/assets/resources/img/ArrowDownConfig.svg");
}

But my css code is unable to precedence over the ionic(inbuilt).

You can see there are two arrows in the image, one is inbuilt and another is custom. I want to remove inbuilt(ionic) one.

enter image description here

Solution

I’ve created this directive which you can add to your ion-select to make it look just like other ion elements with placeholder (without arrow).

Usage:

<ion-select placeholder="Choose" appNoArrow>...

Answered By – S. Roose

Answer Checked By – Timothy Miller (Easybugfix Admin)

Leave a Reply

(*) Required, Your email will not be published