Why can't style default inputs anymore? T_T

Ionic Framework
1

Guys, why!? Why did you do this? Now, since upgrading to Ionic 8, if I want the correctly rounded corners back on my inputs I have to go through my ENTIRE application and put a custom CSS class on EVERY SINGLE INPUT? That is so uncool. Why can’t we overwrite the default anymore? Why take away the ability to have easy custsom styles that can be applied with just a single css file to any Ionic app? Worst decision ever…

RE: ion-input: Custom Input With Styling and CSS Properties

2

This seems to have existed in Ionic 7 as well - ion-input: Custom Input With Styling and CSS Properties

I was able to target the IonInput by using the following selectors that already exist.

ion-input.ios,  
ion-input.md {
    --background: #373737;
    --color: #fff;
    --placeholder-color: #ddd;
    --placeholder-opacity: 0.8;

    --padding-bottom: 10px;
    --padding-end: 10px;
    --padding-start: 10px;
    --padding-top: 10px;
  }
3

Thanks! I didn’t have this issue w/ Ionic 7. Now I’m afraid they’ll take even this away in Ionic 9 :confused:

4

Is there any way to change the color of just the label?

5

You could either use the experimental custom label slot or the following Global CSS (worked for me in Vue).

ion-input div.label-text {
  color: red;
}