如何更改ionic 4中离子选择的默认样式（＃shadow-root下的.select-placeholder，.select-icon..etc元素）

Question

我是离子新手。我对离子选择样式感到困惑，如何更改ionic 4中的离子选择默认样式？我无法通过覆盖CSS进行更改。

像这样

.select-placeholder {
    color: black;
    opacity: 1;
}

Answer 1

这是您的操作方式，

customElements.whenDefined("ion-select").then(() => {
    let selectPlaceholder = document.querySelector("ion-select").shadowRoot.querySelector(".select-placeholder");
    selectPlaceholder.style.setProperty("color", "black");
    selectPlaceholder.style.setProperty("opacity", "1");
});

Answer 2

一种非传统的方法，但是对我来说在编译后更改js文件很有用： \ node_modules \ @ionic \ core \ dist \ esm \ es5 \ build \ j241fzpw.entry.js

select-placeholder {color：currentColor;透明度：0.33}

为

select-placeholder {color：currentColor;透明度：1}

我不确定，但是可能有问题的文件可能会有所不同

Answer 3

您可以尝试以下方法：

.select-ios .select-placeholder{
    color: #000;
    font-size: 15px;
  }

Answer 4

使用HTML标记，您将找到ion-select的“部分”，之后，css跟随该“部分”。

ion-select::part(placeholder) {
    color: blue;
    opacity: 1 !important;
}