[Ionic4] ion-select customizing(커스터마이징) 방법

Ionic4에서 기본으로 제공하는 select component가 마음에 들지 않아서 변경해 보았습니다.

 

기존에 적용되어 있던 select icon을 제거하고 새로운 icon으로 대체했습니다. 

const ionSelects = document.querySelectorAll('ion-select');
let img = null;
ionSelects.forEach((ionSelect) => {
    const selectIconInner = ionSelect.shadowRoot.querySelector('.select-icon').querySelector('.select-icon-inner');
    if (selectIconInner) {
        selectIconInner.attributes.removeNamedItem("class");
        img = document.createElement("img");
        img.src = "../../../assets/icon/arrow-down.svg";
        img.style.width = "12px";
        img.style.paddingTop = "3px";
        img.style.paddingLeft = "4px";
        img.style.color = "black";
        img.style.opacity = "0.5";
        selectIconInner.appendChild(img);
    }
});

ionViewDidEnter()에 해당 코드를 삽입하여 적용했습니다.