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

Question

我看到了这个问题：

我的问题是，无论如何都要将输入和标签作为这种设计？谢谢，

Answer 1

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

.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一起使用可以参考codepenhere

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

How to put label on input like fieldset of HTML tag

html

label

input

border