title: How to style ion-input in Angular/Ionic framework?
body: <p>I am using Angular7 and Ionic4 and I am trying to style a form which has many ion-inputs. </p>
  
  <p>I've been trying a lot of CSS options, but nothing seems to work. </p>
  
  <p>Right now, the ion-inputs I have are very large in height and I would like to make them look better, smaller.</p>
  
  <p>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. </p>
  
  <p>This is how my <strong>HTML</strong> code for inputs looks like: </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ion-item lines="none" class ="itemform"&gt;
     &lt;ion-input  class ="inputClass" id = "nameInput" [(ngModel)]="name" 
         [ngModelOptions]="{standalone: true}" type = "text" placeholder = 
         "Package's Name" required&gt;
     &lt;/ion-input&gt;
  &lt;/ion-item&gt;
  
  </code></pre>
  
  <p>And the <strong>CSS</strong> code: </p>
  
  <pre class="lang-css prettyprint-override"><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%;
  }
  </code></pre>
  
  <p>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. </p>
  
  <p>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.</p>