如何实现适配不同背景的输入框浮动标签（遮挡上边框）

我需要实现一个能悬浮在输入框上边框的浮动标签，同时要把它覆盖到的那部分输入框边框遮挡住。当输入框内部和外部背景颜色一致时，下面这套基于Tailwind的代码能正常运行，但一旦输入框背景变化（比如disabled状态），问题就出现了。

现有代码结构 #

<div className='inline-flex relative align-top'>
  <input id={id} type='text' className={inputClassname} />
  <label id={`{$id}-label`} htmlFor={id} className={labelClassname}>
    Label here
  </label>
</div>

标签样式（labelClassname） #

其中peer-placeholder-shown简写为peer-plc-s，问题大概率出在bg-white这个属性上：

absolute block z-[1] transition-all bg-white px-1 
text-gray-700                       -top-2            left-2 
peer-focus:text-gray-700 peer-focus:-top-2 peer-focus:left-2 
peer-plc-s:text-gray-500 peer-plc-s:top-4  peer-plc-s:left-4

输入框样式（inputClassname） #

peer placeholder-transparent border px-4 pt-3 pb-1
focus-visible:outline-none text-lg 
border-gray-400 box-border
border-b-4 focus:border-b-secondaryc

不同状态表现 #

• 无交互状态（正常）：空输入框，标签位于输入框内部
  
• 输入内容并聚焦（正常）：标签上浮到边框上方，输入框处于聚焦状态
  
• 输入框背景变化（异常，如disabled状态，背景设为bg-white）：标签的白色背景框明显显现，违和感很强
  
• 改用bg-inherit或bg-transparent（异常）：标签无法遮挡输入框的上边框，边框线条会穿过标签文字
  

请问怎么实现既能遮挡输入框上边框，又不会在输入框与外部背景颜色不同时出现违和背景的浮动标签？

内容的提问来源于stack exchange，提问作者chrisb2244