Input Styling for Invalid and other states on iOS not working

Ionic Framework ionic-v3
1

Hi,

I’m experiencing a problem trying to get default Ionic styling for form validations to work on iOS.

If an input field is invalid eg. ‘ab’ is entered into a type="email" ion-input, the state is not updated.
The classes are correctly set by angular (‘ng-invalid’).

If I force the mode to ‘md’ everything is working fine.

If i search through the compiled css there are .ng-invalid styles for material design present, but not for iOS. Hence why Material Design is working and iOS doesn’t.

Has anyone else experienced this problem?

Ps. On the docs this is present as well for the active state of an input.

Kind regards,
Ruud

2

Shameless bump… anyone?

3

Have you found a solution for this ?

4

@nourh
Yes, I have.
Apparently you’ll have to enable this for iOS with a variable in SCSS.

Add this to your variables.scss:

$text-input-ios-show-focus-highlight: true;

Kind regards,
Ruud

2 Likes
5

Thanks for the information