bug: Styles in ion-input texts

[Marius-Romanus]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

Hello!

In the new ion-input syntax in ionic 7, the classes that affect the text affect both the label and the input. You may want it to only affect the input. It also does not behave the same in Chrome as in Firefox, for example, in Firefox the class "text-decoration-line: line-through;" It doesn't affect you.

Chrome:

Firefox:

greetings!

Expected Behavior

• Being able to choose what the class affects, between the label and the input.
• That the text-decorations work in Firefox (I don't know if there are more styles that don't work)

Steps to Reproduce

Take the example from https://ionicframework.com/docs/api/input and put styles on the text. Test in different browsers.

Code Reproduction URL

https://stackblitz.com/edit/angular-zxkpbf-w78agc?file=src%2Fapp%2Fexample.component.css,src%2Fapp%2Fexample.component.html

Ionic Info

Ionic:

   Ionic CLI                     : 7.2.0
   Ionic Framework               : @ionic/angular 7.7.0
   @angular-devkit/build-angular : 17.1.2
   @angular-devkit/schematics    : 17.1.2
   @angular/cli                  : 17.1.2
   @ionic/angular-toolkit        : 11.0.1

Capacitor:

   Capacitor CLI      : 5.6.0
   @capacitor/android : 5.6.0
   @capacitor/core    : 5.6.0
   @capacitor/ios     : not installed

Utility:

   cordova-res : not installed globally
   native-run  : 2.0.0

System:

   NodeJS : v20.9.0
   npm    : 10.1.0
   OS     : Windows 10

Additional Information

No response

[mapsandapps]

Hi, thank you for your report. To target elements within an ion-input using Angular, you'll need to use a global stylesheet because of encapsulation. You can take a look at the example here – click over to Angular and then view the src/global.css file.

Your example will have lines through the input in Firefox after adding the following code to the global.css file in the Stackblitz:

.decoration .native-input {
  text-decoration-line: line-through;
  font-weight: bold;
}

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.