html - 如何在与输入字段顶部边框重叠的标签前后添加填充？

Question

我正在尝试创建看起来像这样的输入字段

这很简单，因为我可以用一些填充向标签添加白色背景。问题是当字段出现在像这样的非白色背景上时

有没有办法在标签上使用透明背景来实现这一点？

https://jsfiddle.net/jgu61qaq/

<div class="floating-label bg-white">
  <label>Label</label>
  <input type="text" value="Something">
</div>

<div class="floating-label bg-gray">
  <label>Label</label>
  <input type="text" value="Something">
</div>

<style>
.floating-label {
  padding: 20px;
  position: relative;
  font-family: Arial, sans-serif;
}

.bg-white {
  background: #fff;
}

.bg-gray {
  background: #eee;
}

input {
  padding: 5px 10px;
  font-size: 14px;
}

label {
  font-size: 11px;
  position: absolute;
  top: 15px;
  left: 25px;
  background: #fff;
  padding: 0 5px;
}
</style>

Answer 1

也许是这样的？

label {
  position: relative;
  top: -16px;
  left: 46px;
  z-index: 0;
}
label:before {
  z-index: -1;
  content: '';
  display: block;
  width: 100%;
  height: 50%;
  background-color: #fff;
  position: absolute;
  top: 50%;
  margin-top: -1px;
}

https://jsfiddle.net/jgu61qaq/3/

我使用 :before 选择器创建一个白色的 50% 高度的标签元素来隐藏边框