如何从ionic4中的离子选择中删除小插入符答案

【问题标题】：How to remove small caret from ion-select in ionic4如何从ionic4中的离子选择中删除小插入符
【发布时间】：2019-08-13 12:12:51
【问题描述】：

我想从ion-select 中删除内置的灰色小插入符，并使用我的改为自定义插入符号（箭头）。

代码：

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

但我的 css 代码无法优先于 ionic(inbuilt)。

您可以看到图像中有两个箭头，一个是内置的，另一个是自定义的。我想删除内置（离子）一个。

【问题讨论】：

标签： angular ionic-framework ionic2 ionic3 ionic4

【解决方案1】：

要删除图标，

 ion-select::part(icon) {
    display: none !important;
   }

要修改图标，

  ion-select::part(icon) {
    color: #ffa612 !important;
   }

【讨论】：

是的，这适用于 Ionic 5。实际上我正在使用 "@ionic/angular": "^5.0.4" 并且工作正常。
我的意思是...这不适用于 Ionic 4 或更低版本。仅适用于 Ionic 5 或更高版本。
顺便说一句，如果你使用浮动标签，你应该使用width: 0而不是display:none

【解决方案2】：

如果您只想删除插入符号，您可以这样做：

// ...other page methods

  ionViewDidEnter() {
    const ionSelects = document.querySelectorAll('ion-select');
    ionSelects.forEach((sel) => {
      sel.shadowRoot.querySelectorAll('.select-icon-inner')
        .forEach((elem) => {
          elem.setAttribute('style', 'display: none;');
        });
    });
  }

基于@Sangminem response

此外，就我而言，我使用slot="end" 和ion-icon 来放置替换图标：

<ion-item lines="inset">
  <ion-label position="floating">Label</ion-label>

  <ion-select>
    <ion-select-option value="1">Option 1</ion-select-option>
    <ion-select-option value="2">Option 2</ion-select-option>
    <ion-select-option value="2">Option 3</ion-select-option>
  </ion-select>

  <ion-icon color="danger" slot="end" name="arrow-dropdown-circle" class="ion-align-self-center"></ion-icon>
</ion-item>

【讨论】：

顺便说一句，如果你使用浮动标签，你应该设置width: 0样式而不是display:none
对于 Ionic 5，你应该使用这个答案：stackoverflow.com/a/62851330/7242535

【解决方案3】：

我创建了this 指令，您可以将其添加到您的离子选择中，使其看起来就像其他带有占位符的离子元素（无箭头）。

用法：

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

【讨论】：

【解决方案4】：

我不知道如何解决，遇到同样的问题，但似乎是 DOM Shadow 的问题

如果你有任何发现，请告诉我，谢谢。

更新：找到了一些answer

更新 #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);
}

【讨论】：

【解决方案5】：

如果有多个离子选择项目，这里是一个示例。

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);
      }
    });
}

【讨论】：

【解决方案6】：

我找到了一种用 css 删除默认 icon 的方法，使用 ::part 指令：

&::part(icon) {
    display: none;
}

箭头消失了。

【讨论】：

顺便说一句，如果你使用浮动标签，你应该使用width: 0而不是display:none

【解决方案7】：

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

我认为只有使用 ioni3 才有可能。如果你只想解决ionic4中的css，你需要知道ionic4中select-icon的确切类名

【讨论】：

【解决方案8】：

要修改图标，调用这个函数

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

【讨论】：

【解决方案9】：

如果你想要相当 ion-select-option 的图标，只需要在上面添加 mode="ios"

【讨论】：

注意：非常简短的答案和/或回帖者的问题可能应该是 cmets。你只需要 50 个代表点就可以在一个问题下发表评论 - 你能把它移到那里吗？

【解决方案10】：

要修改图标，你可以试试这样：
.select-icon-inner { border-top: transparent!important; }

【讨论】：