html - 如何在 Angular/Ionic 框架中设置 ionic 输入的样式？

Question

我正在使用 Angular 7 和 Ionic 4，我正在尝试设计一个具有许多 ionic 输入的表单。

我已经尝试了很多 CSS 选项，但似乎没有任何效果。

现在，我的 ionic 输入高度非常大，我想让它们看起来更好，更小。

我试着给 ionic 输入一个类，听说这样修改 CSS 会更容易，但它不起作用。

这是我的输入 HTML 代码的样子:

<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>

还有 CSS 代码:

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%;
}

宽度可以改小一点，但是高度有默认值(或者是我不明白的问题)，不能调整。

我想了解为什么不能更改高度以及如何更改它并使我的 ion-input 看起来更好。

Answer 1

下面的 css 适合我

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;
        }