Javascript 在角度反应形式上匹配周围组件中的自动完成高光颜色

我已经用Angular编写了一些自定义表单控件包装，当浏览器自动填充值时，它们看起来像这样

高亮显示的部分是输入元素

我想让整个组件都高亮显示，这样看起来像这样

每个浏览器都使用不同的颜色来进行自动填充高亮显示，因此我需要通过编程将包含元素的背景与自动填充输入的背景相匹配

在做了一些研究之后，似乎没有一个好的方法可以使用CSS来实现这一点，所以我尝试通过TypeScript来实现

这是我在组件中尝试的内容

  export class TextInputComponent implements ControlValueAccessor{
    @ViewChild('input') input: ElementRef;
    @ViewChild('styledInput') styledInput: ElementRef;

  /* Lots of other code here */

  public matchBackgroundToAutofillHighlight(): void {
        if(this.styledInput && this.input){
          console.log('computed styles => ', getComputedStyle(this.input.nativeElement));

          const bgColor = getComputedStyle(this.input.nativeElement).backgroundColor;
          console.log(bgColor);

          const bgColorAttempt2 = getComputedStyle(this.input.nativeElement).getPropertyValue('backgroundColor');
          console.log(bgColorAttempt2);

          const bgColorAttempt3 = getComputedStyle(this.input.nativeElement).getPropertyValue('background-color');
          console.log(bgColorAttempt3);
      
          this.styledInput.nativeElement.backgroundColor = this.input.nativeElement.backgroundColor;
    }
  }}

styledInput是需要新背景颜色的包装元素，input是从浏览器自动填充框中获取背景的元素。这就是我看到奇怪行为的地方

整个getComputedStyle（）返回对象的控制台日志似乎具有正确的backgroundColor属性

console.log('computed styles => ', getComputedStyle(this.input.nativeElement));

然后我尝试提取该值的下面的日志都显示rbg（255、255、255）或空字符串

const bgColor = getComputedStyle(this.input.nativeElement).backgroundColor;
      console.log(bgColor);

      const bgColorAttempt2 = getComputedStyle(this.input.nativeElement).getPropertyValue('backgroundColor');
      console.log(bgColorAttempt2);

      const bgColorAttempt3 = getComputedStyle(this.input.nativeElement).getPropertyValue('background-color');
      console.log(bgColorAttempt3);

那么，在查询computedStyle对象时，我做错了什么？有没有更有效的方法来实现这一点