要强制Chrome自动填充绘制整个输入框,可以使用Angular Material中的::ng-deep
伪类选择器来覆盖Chrome的默认样式。以下是一个示例代码:
在HTML模板中,使用Angular Material的
和元素来创建输入框:
在CSS样式文件中,使用::ng-deep
伪类选择器来覆盖Chrome的默认样式,并设置box-sizing
属性为content-box
:
::ng-deep input:-webkit-autofill {
-webkit-box-sizing: content-box !important;
box-sizing: content-box !important;
}
这将强制Chrome自动填充绘制整个输入框,而不被默认样式截断。
请注意,::ng-deep
伪类选择器在Angular 11及更高版本中已被废弃。替代的方法是使用全局CSS样式文件,并使用/deep/
组合选择器来覆盖默认样式:
/deep/ input:-webkit-autofill {
-webkit-box-sizing: content-box !important;
box-sizing: content-box !important;
}
希望这个示例能帮助到你!