Ionic 4 overwrite disabled input opacity

[jwallmueller]

Hi,

I’m using a light grey background for my ion-inputs. When I set them to disabled the standard opacity makes it very hard to read. I can’t seem to overwrite

.native-input[disabled] {
    opacity: .4;
}

because it is part of the shadow dom. Is there a way to change that?

[MrTrieu]

[ionic-v4] shadow-dom

I migrate my app from v3 to v4 and I have many problems with CSS and shadow-dom. How can I change the CSS for a child-element in shadow-root. Example I want to change css for class .button-inner in ion-button here is my code for ionic v3 .long-text-button .button-inner { font-size: 12px; padding: 0px; margin: 0px; text-align: center; white-space: normal; } I can’t use it in v4 because it wrap in shadow-root

[gregorsrdic]

@MrTrieu

d-element in shadow-root. Example I want to change css for class .button-inner in ion-button here is my code for ionic v3 .long-text-button .button-inner { font-size: 12px; padding: 0px; margin: 0px; text-align: center; white-space: normal; } I can’t use it in v4 because it wrap in shadow-root

You can override css variables, that are listed in the component documentation

[yoxallw]

ion-button.button-disabled{–opacity:1;} isn’t working for me as it is adding the opacity inside the shadow dom button element. Other css overrides such as --background work fine as the styling is on ion-button itself. Any ideas? According to this post (https://github.com/ionic-team/ionic/issues/16965) it should work as Ive written it. I’ll update when I find the solution.

[sampath]

Instead of disable I have used readonly like so:

<ion-input formControlName="city" type="text" [readonly]="true">

 </ion-input>