1. 首页
  2. 问题列表
  3. 角材质表单样式-输入背景和按钮高度
提问者：小点点

角材质表单样式-输入背景和按钮高度


我有一个相当基本的电子邮件输入和提交按钮形式。 我试着做以下几件事:

  • 使电子邮件输入背景为白色
  • 使“提交”按钮与输入高度相同

当我试图改变CSS中输入的背景时，它只改变了角度材质输入域内的一个小矩形。 另外，当我将height属性更改为100%时，按钮不会改变高度。

我肯定我错过了一些简单的东西。 有人能帮忙吗？

<form>
                <mat-form-field appearance="outline">
                    <mat-label>E-Mail</mat-label>
                    <input matInput placeholder="E-Mail" required>
                </mat-form-field>
                <button mat-raised-button color="primary" type="submit">Get Updates!</button>
</form>


共1个答案

匿名用户

应获取输入&； 按钮以获得等高:

form {
   display:flex;
   flex-direction:row;
}

以及输入元素不样式的原因。 是因为您绑定了mat-form-field中的元素的样式，而该元素是一个不同的组件。 如果您想像在您的案例中那样对内部组件元素进行样式化，您应该这样做:

:host ::ng-deep mat-form-field {
   .input {
       background-color:#fff;
   }
}

相关问题