标签横截面的输入边框切口

Question

我想在边框横截面上放置输入标签，并想像这样在标签下隐藏边框我通过简单地将标签背景设为白色来做到这一点，但如果我将它放在灰色内显然不起作用 div 还有其他解决方案吗？

此外，我使用的是类星体输入，因此我仅限于 css 解决方案

Answer 1

使用字段集

textarea {
  width: 100%;
  border: none;
}

<form>
  <fieldset>
    <legend>Your heading</legend>
    <textarea></textarea>
  </fieldset>
</form>

Answer 2

您可以对标签使用绝对位置，并使用顶部和左侧来定位标签。为什么要使用位置？然后你有更多的灵活性。也许你可以将标签推到右边等等。

* {
  font-family: arial;
}

/** float container */
.float-container {
  border: solid 1px #ccc;
  box-sizing: border-box;
  margin-bottom: 8px;
  padding: 0 8px;
  position: relative;
  width: 300px;
} 
input {  
    border: none;
    font-size: 16px;
    outline: 0;
    padding: 16px 0 10px;    
    width: 100%;
  }

  label {
    font-size: 12px;
    position: absolute;
    top: -6px;
    left: 10px;
    background: white;
  }

<div id="floatContainer1" class="float-container ">
  <label for="floatField1 ">Label 1</label>
  <input type="text" id="floatField1" data-placeholder="Placeholder 1">
</div>

标签横截面的输入边框切口

Input border cutout for label cross section

css

html-input