如何在ionic 4中更改离子选择的默认样式(.select-占位符、.select-图标..等#shadow-root下的元素)

Question

我是个新手。我坚持使用ion-select样式，如何在ionic 4中更改ion-select的默认样式？我不能通过覆盖CSS来改变它。

像这样

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

Answer 1

仔细检查Html，你会发现ion-select的“部分”，然后css紧跟着那个“部分”。

​

​

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

Answer 2

这是你怎么做的，

window.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 3

您可以尝试这样做：

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