Comment supprimer le petit curseur de Ion-Select dans Ionic4

Question

Je souhaite supprimer le petit curseur gris intégré de ion-select, et utilisez à la place mon curseur personnalisé (flèche).

Code:

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

Mais mon code CSS ne peut pas prévaloir sur l'ionique (intégré).

Vous pouvez voir qu'il y a deux flèches dans l'image, l'une est intégrée et l'autre est personnalisée. Je veux supprimer celui intégré (ionique).

Answer 1

.select-icon-inner { border-top: transparent!important;}

Je pense que cela n'est possible qu'avec ioni3. Si vous souhaitez résoudre uniquement les CSS dans ionic4, vous devez connaître le nom de classe exact de select-icon dans ionic4

Answer 2

Pour modifier l'icône, appelez cette fonction

async removeSelectCaret(id){
    const select = await (window.document.querySelector(`#${id}`) as HTMLIonSelectElement).componentOnReady();
    select.shadowRoot.childNodes[1]['style'].display="none";
  }