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

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/

我用过：在选择器之前创建一个白色50％高度的标签元素来隐藏边框

Answer 2

body{
    background-color:#ececec;
}

fieldset{
    padding: 0;
    width: 0;
    background-color: #FFF;
    border: 1px solid gray;
}

fieldset input{
    border:none;
    margin-top:-10px;
    height:25px; 
    background-color:transparent;
}

 <fieldset>
  <legend>Lorem Ipsum:</legend>
  <input type="text">
 </fieldset>