Angular自定义Material轮廓输入框：实现标签浮动缺口

我正在实现自定义Material风格轮廓输入框，需要标签浮动时的缺口效果。已知Angular Material有现成组件，但因特殊定制需求必须自行开发。目前已实现标签浮动效果，但缺口创建遇到困难。试过给标签加白色背景的方案，但输入框背景为其他颜色（当前为beige），该方案不适用。需要多浏览器兼容的实现思路，可使用JS方案。

当前效果：

预期效果：

当前代码 #

HTML #

<div class="material-textfield">
  <input placeholder=" " type="text" value="test" />
  <label class="label-container">Label</label>
</div>

CSS #

.material-textfield {
  position: relative;
}

.label-container {
  position: absolute;
  font-size: 1rem;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: transparent;
  color: gray;
  padding: 0 0.3rem;
  margin: 0 0.5rem;
  transition: 0.1s ease-out;
  transform-origin: left top;
  pointer-events: none;
}
input {
  font-size: 1rem;
  outline: none;
  border: 1px solid gray;
  border-radius: 5px;
  padding: 1rem 0.7rem;
  color: gray;
  transition: 0.1s ease-out;
  background-color: beige;
}
input:focus {
  border-color: #6200ee;
}
input:focus + .label-container {
  color: #6200ee;
  top: 0;
  transform: translateY(-50%) scale(0.9);
}

input:not(:placeholder-shown) + .label-container {
  top: 0;
  transform: translateY(-50%) scale(0.9);
}

核心思路是利用标签的伪元素模拟"缺口"：在标签左右两侧添加与输入框背景色一致的小色块，覆盖下方边框，同时保持标签文字区域透明，露出输入框背景。同步伪元素状态与输入框聚焦/非聚焦状态，确保视觉一致性。

修改后的CSS代码 #

.material-textfield {
  position: relative;
}

.label-container {
  position: absolute;
  font-size: 1rem;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: gray;
  padding: 0 0.3rem;
  margin: 0 0.5rem;
  transition: 0.1s ease-out;
  transform-origin: left top;
  pointer-events: none;
  background-color: transparent;
}

/* 左侧覆盖块：遮盖输入框左侧边框 */
.label-container::before {
  content: '';
  position: absolute;
  left: -0.3rem;
  top: 0;
  bottom: 0;
  width: 0.3rem;
  background-color: beige;
  transition: background-color 0.1s ease-out;
}

/* 右侧覆盖块：遮盖输入框右侧边框 */
.label-container::after {
  content: '';
  position: absolute;
  right: -0.3rem;
  top: 0;
  bottom: 0;
  width: 0.3rem;
  background-color: beige;
  transition: background-color 0.1s ease-out;
}

input {
  font-size: 1rem;
  outline: none;
  border: 1px solid gray;
  border-radius: 5px;
  padding: 1rem 0.7rem;
  color: gray;
  transition: 0.1s ease-out;
  background-color: beige;
}

input:focus {
  border-color: #6200ee;
}

input:focus + .label-container {
  color: #6200ee;
  top: 0;
  transform: translateY(-50%) scale(0.9);
}

input:not(:placeholder-shown) + .label-container {
  top: 0;
  transform: translateY(-50%) scale(0.9);
}

补充说明 #

1. 伪元素宽度与标签左右padding匹配，确保刚好覆盖输入框边框部分；
2. 伪元素颜色必须与输入框背景色完全一致，视觉上呈现边框"切断"的缺口效果；
3. 过渡动画与原代码保持一致，保证交互流畅；
4. 纯CSS实现，天然支持多浏览器兼容（IE11及以上均支持伪元素与transform属性）。

若需动态适配不同输入框背景色，可通过JS监听输入框背景色变化，同步更新伪元素background-color值。

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