How To Make Custom Select Arrow In Ionic 4

The ion-select component is similar to an HTML <select> element, however, Ionic’s select component makes it easier for users to sort through and select the preferred option or options. When users tap the select component, a dialog will appear with all of the options in a large, easy to select list for users.

The select component takes child ion-option components. If ion-option is not given a value attribute then it will use its text as the value.

If ngModel is bound to ion-select, the selected value will be based on the bound value of the model. Otherwise, the selected attribute can be used on ion-option components.

 

How To Make Custom Select Arrow In Ionic 4

.TS File Changes

Create an ionViewDidEnter()  function  in .Ts file and put  inline CSS Example below

 

constbhati1=document.querySelectorAll('ion-select');
bhati1.forEach((sel) => {
sel.shadowRoot.querySelectorAll('.select-icon-inner')
.forEach((elem) => {
elem.setAttribute('style', 'opacity: 1; border: none;
 background: url(../../assets/images/down.svg) center center no-repeat !important;
 width: 12px; height: 12px;');
});
});

ionViewWillEnter runs when the page is about to enter and become the active page.

ionViewDidEnter runs when the page has fully entered and is now the active page.

ionViewDidEnter will fire after all synchronous in ionViewWillEnter completed.

 

How to change placeholder color in ion select

.TS File Changes

  ionViewDidEnter() { 

    // select placeholder color 
    const bhati2 = document.querySelectorAll('ion-select');
    bhati2.forEach((sel2) => {
      sel2.shadowRoot.querySelectorAll('.select-placeholder')
        .forEach((elem) => {
          elem.setAttribute('style', 'opacity: 1; color:red;');
        });
    });

  }

admin
Leave a Reply

Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages