How to style ion-input in Angular/Ionic framework?

Question

I am using Angular7 and Ionic4 and I am trying to style a form which has many ion-inputs.

I've been trying a lot of CSS options, but nothing seems to work.

Right now, the ion-inputs I have are very large in height and I would like to make them look better, smaller.

I tried giving a class to the ion-inputs, hearing that it would be easier to modify the CSS like that, but it's not working.

This is how my HTML code for inputs looks like:

<ion-item lines="none" class ="itemform">
   <ion-input  class ="inputClass" id = "nameInput" [(ngModel)]="name" 
       [ngModelOptions]="{standalone: true}" type = "text" placeholder = 
       "Package's Name" required>
   </ion-input>
</ion-item>

And the CSS code:

ion-input{
    --background: rgb(219,219,219);

}

.itemform {
    border-radius: 10px !important;
    padding-left: 30px !important;
    padding-right: 30px;
    font-size: 0.9em;
    border: 1px solid #f1f1f1;
    background: rgb(219, 219, 219);
    height: 10%;
    width: 50%;
}

The width can be changed to be a bit smaller, but the height has a default value (or a problem which I don't understand) and can't be resized.

I would like to understand why the height can't be changed and also how I can change it and make my ion-input look better.

Solution

the below css works fine for me

ion-input{
            border-radius: 10px !important;
            padding-right: 30px;
            font-size: 0.9em;
            border: 1px solid #f1f1f1 !important;
            --background: rgb(219,219,219) !important;
            /* height: 10%; */
            /* width: 41%; */
            max-width: 50vw; // this is applying perfectly
            max-height: 10vh;
        }

Comments

[Ade]

I will try your code in a bit and tell you if it works. But thank you a lot for your time anyway! :)