更改MATFORMFIELD的CSS，使其在有Angular 的HTML中显示为普通文本框

<mat-form-field  class="custom-form-field" style="padding-top: 5px;padding-bottom: 0px; line-height: 0px;">
    <input style="padding-top: 0px; padding-bottom: 0px;" matInput type="text" id="onSearch" (keyup)="keyUp($event)">
    <mat-icon matPrefix class="centered-icon">search</mat-icon>
</mat-form-field>

.custom-form-field .mat-form-field-outline-thick,
.custom-form-field
  .mat-form-field-appearance-outline.mat-focused
  .mat-form-field-outline-thick {
  border-color: black !important;
  color: black !important;
  opacity: 1 !important;
}
.custom-form-field .mat-input-element {
  caret-color: black !important;
}

.custom-form-field .mat-form-field-outline-thick,
.custom-form-field
  .mat-form-field-appearance-outline.mat-focused
  .mat-form-field-outline-thick {
  border-color: #ced4da !important;
  border-width: 0px !important;

  color: #ced4da !important;
  opacity: 1 !important;
}
.custom-form-field .mat-input-element {
  caret-color: #ced4da !important;
  color: #575e64;
}
.custom-form-field .mat-form-field-infix {
  border-top: 0px !important;
  padding: 0.9em 0 0.6em 0 !important;
}
.custom-form-field .mat-form-field-prefix {
  top: -1px !important;
  color: #575e64;
}
.custom-form-field .mat-form-field-outline-start,
.custom-form-field .mat-form-field-outline-end,
.custom-form-field .mat-form-field-outline-gap {
  border-width: 1px !important;
}

Css相关问答推荐

如何提高数学输出的质量？

在carousel组件上应用css转换时出现问题

如何在WooCommerce产品页面中减少属性下拉菜单之间的空间

InertiaJS - Vue - Laravel：Using CSS Files

CSS Select 器仅 Select 具有特定类名称的每行的第一个单元格

为什么 CSS Calc() 函数只需要+或-运算符前后有空格

根据子索引计算变换 CSS 参数

如何在使用 bslib 5 的shiny 应用程序中使用样式参数排列 ui 元素

.SVG 文件对象在锚标签下可点击

在 React 中使用 CSS 动画 onClick()

如何增加 PrimeFlex 网格的间隙？

react 样式的条件类名称设置

Angular Datepicker - 更改日期范围 Select 样式

表格的边框半径没有按预期工作

如何定位 CSS 网格布局中的特定列或行？

在表格中使用自动换行：断词

如何在 CSS 中覆盖图像？

如何填充 100% 的剩余高度？

为什么 CSS 中的光标：指针效果不起作用

如何将文本与图标字体垂直对齐？