CSS hack for hiding input while autofill is ON

gistfile1.txt

  syncTimeouts(() => {
    if (input.matches(':autofill')) {
      console.log('input has autofilled')
      input.style.opacity = '0 !important'
    } else {
      console.log('input is no longer autofilled')
      input.style.opacity = '1'
    }
  })
  
  if (!document.getElementById('input-otp-style')) {
    const styleEl = document.createElement('style')
    styleEl.id = 'input-otp-style'
    document.head.appendChild(styleEl)
    styleEl.sheet?.insertRule(
      '[data-input-otp]::selection { background: transparent !important; }',
    )
    styleEl.sheet?.insertRule(
      '[data-input-otp]:autofill { background: transparent !important; text: transparent !important; border-color: transparent !important; opacity: 0 !important; }',
    )
    styleEl.sheet?.insertRule(
      '[data-input-otp]:-webkit-autofill { background: transparent !important; text: transparent !important; border-color: transparent !important; opacity: 0 !important }',
    )
  }