2

I am new to ionic. I am Stuck with ion-select styling, How can I change default styles of ion-select in ionic 4? I'm not able to change it by overwriting CSS.

like this

.select-placeholder {
    color: black;
    opacity: 1;
}
Suraj Kumar
  • 5,547
  • 8
  • 20
  • 42
imkp93
  • 21
  • 1
  • 3
  • ionic 4 components can styled only through the css variables they provide.. – Suraj Rao Feb 02 '19 at 11:25
  • @SurajRao yes, but in the case of #shadow-root elements like .select-placeholder under the ion-select, I didn't find any CSS variables to set the opacity and also am unable to adjust the down-arrow button. eg: This .select-text is a #shadow-root element and there is no CSS variables `.select-text { -ms-flex: 1; flex: 1; min-width: 16px; font-size: inherit; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }` – imkp93 Feb 02 '19 at 11:45
  • Unless ionic devs have used css 4 variables to set that style, you cant use it... You might want to read up on web components – Suraj Rao Feb 02 '19 at 12:01
  • @SurajRao : Okay , Thank you ! – imkp93 Feb 03 '19 at 05:51

4 Answers4

1

Specting Html and you will find the "part" of ion-select, after that just css follow that "part".

enter image description here

ion-select::part(placeholder) {
    color: blue;
    opacity: 1 !important;
}
TLVF2627
  • 97
  • 2
  • 8
0

Here is how you do it,

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");
});
Waseem Ahmed
  • 164
  • 3
0

You can try this:

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

an unorthodox method but it was useful for me to change a js file after compiling: \ node_modules \ @ionic \ core \ dist \ esm \ es5 \ build \ j241fzpw.entry.js

select-placeholder {color: currentColor; opacity: 0.33}

for

select-placeholder {color: currentColor; opacity: 1}

I'm not sure but maybe the file in question could vary

P S
  • 1
  • Modifying the contents of node_modules is not a reliable fix for many, many reasons. – invot Jun 25 '19 at 17:38
  • This is not a robust solution given that it will only work locally and be overwrote when you run a "npm install". Also team members wont have access to this - unless you were to create a fork, which is not ideal for such a change. – Jay Ordway Jul 16 '20 at 23:19