我正在与一位自由客户合作,他希望在整个元素中使用 Angular Material。但是,他们不喜欢下划线在 Angular Material 输入中的样子。我尝试了多种方法来改变这一点,但我还没有找到任何成功的方法。
老实说,我什至无法在 DOM 中找到可以让我更改该边框的标记。
Here是 Angular Material 文档,因为您可以看到所有可用选项都至少有某种形式的底部边框。
我尝试过的一些方法:
- > This one来自旧的 Angular Material ,不再适用于新的 Angular Material
- 接受的答案 here用于新的 Angular Material ,但我无法让它工作。我完全按照描述实现并且没有更改样式。
- > This approach看起来它会工作。不幸的是,我也无法让它工作。
如果您对此主题有任何帮助或意见,我们将不胜感激。
作为引用,客户表示任何偏离预期设计的更改都将被拒绝。所以我必须让它工作。我相信我可能会游说构建一个自定义输入组件作为解决方案,但我知道他们对 Angular Material 已经死心塌地了。
编辑。添加了所需外观的图片:
最佳答案
这段小代码帮我做了。我不想显示它,只是将高度和宽度设置为 0。
::ng-deep .mat-form-field-underline{
height:0 !important;
width:0 !important;
}
但是我认为为 Angular Material Components 设计样式有点困难,对我来说有时构建我自己的更好。
关于css - 如何自定义 Angular Material Input 中的样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55053088/