Ionic 5 - How to apply custom styling to ion-input

Question

What is the best way to apply a custom stylesheet to ion-input? I tried by adding custom class but it is not updating all properties of CSS.

Here is my code

  <h1>Log In</h1>
  <ion-item>
    <ion-label position="floating">Email</ion-label>
    <ion-input class="form-input" name="email" type="email" placeholder="your@email.com" ngModel required></ion-input>
  </ion-item>
  <ion-item>
      <ion-label position="floating">Password</ion-label>
    <ion-input name="password" type="password" placeholder="Password" ngModel required></ion-input>
  </ion-item>
  <ion-button class="form-input" shape="round" type="submit" [disabled]="form.invalid" expand="block" class="ion-text-capitalize    ">Log In</ion-button>
</div>

.form-input {
    border: 1px solid $input-border-color;
    padding: $input-padding-25;
    color: $input-color;
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: $input-font-size;
    font-weight: 500;
    font-family: $font-family-base;
    height: auto;
    -webkit-border-radius: $input-border-radius;
    border-radius: $input-border-radius;
    background: $input-bg;
    line-height: 24px;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

Answer 1

Ionic 5 is using CSS4 variables, CSS4 variables can be modified at runtime. Because ionic 5 uses shadow DOM which is a web component standard and you can't style elements which are inside the DOM(which is created at run time), And the only way to modify the DOM for styling via CSS4 variable.

Replace this padding -

padding: $input-padding-25;

Use This -

--padding-start: 20px;
--padding-top: 20px;
--padding-bottom: 10px;
--padding-end: 10;