Как убрать маленькую каретку с ion-select в ionic4 - PullRequest
Новая
       37

Как убрать маленькую каретку с ion-select в ionic4

4 голосов
/ 22 марта 2019

Я хочу удалить встроенную серую маленькую каретку из ion-select и использовать вместо нее мою собственную каретку (стрелка).

Код: 

ion-select {
  color: grey;
  background:url("/assets/resources/img/ArrowDownConfig.svg") no-repeat 92% center !important;
}

Но мой код CSS не можетдля приоритета над ионным (встроенным).

enter image description here

Вы можете видеть, что на изображении есть две стрелки, одна встроенная, а другая нестандартная.Я хочу удалить встроенный (ионный) один.

Ответы [ 3 ]

2 голосов
/ 22 марта 2019

Я не знаю, как исправить, столкнулся с той же проблемой, но, похоже, проблема с DOM Shadow

Если вы найдете что-нибудь, дайте знать, пожалуйста,спасибо.

Обновление: найдено несколько ответов

ОБНОВЛЕНИЕ # 2

Я создал директиву, чтобы иметь доступ к Shadow DOM, и он может добавитьстили в изолированном DOM.

HTML: 

 <ion-select appStyle>

Директива (необходимо найти лучшую реализацию): 

    constructor(private el: ElementRef) {

    setTimeout(() => {
        this.el.nativeElement.shadowRoot.querySelector('.select-icon-inner').setAttribute('style', 'display: none !important');
    }, 3000);
}
0 голосов
/ 26 апреля 2019

Если есть несколько элементов для выбора ионов, вот образец.

Код TS: 

ionViewDidEnter() {
    // ion-select customizing
    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 = "./new-arrow-down-image.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);
      }
    });
}
0 голосов
/ 22 марта 2019

Чтобы изменить значок, вы можете попробовать что-то вроде этого:
.select-icon-inner { border-top: transparent!important; }

...