如何在输入上放置标签，如 HTML 标签的字段集

【问题标题】：How to put label on input like fieldset of HTML tag如何在输入上放置标签，如 HTML 标签的字段集
【发布时间】：2021-02-21 02:27:57
【问题描述】：

我看到了这个问题：How to make irregular CSS border

我的问题是无论如何都要以某种方式输入和标记这种设计？谢谢，

【问题讨论】：

标签： html input label border

【解决方案1】：

您可以通过更改 CSS 文件来实现。只需使用 <label> 和 <input> 并为其添加一些 CSS 类。

.input-field {
  display: flex;
  flex-direction: column;
  width: 500px;
}
.input-field label {
  margin-left: 10px;
}
.input-field label .label-style {
  background: #FFF;
  font-weight: bold;
  padding: 0 10px;
}
.input-field input {
  height: 30px;
  margin-top: -10px;
  z-index: -1;
  padding: 10px 20px;
  border-radius: 10px;
}

<div class="input-field">
  <label for="name"><span class="label-style">Full Name</span></label>
  <input type="text" placeholder="Name" name="name">
</div>

要与 SCSS 一起使用，您可以参考 codepen here

【讨论】：