如何将 label 放在 HTML 标签的字段集之类的输入上

Question

我看到了这个问题： 如何制作不规则的CSS边框

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

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 一起使用，您可以在此处参考 codepen

Answer 2

我的意思是，如果您尝试单击以聚焦输入，那将不起作用，因为 css 错误，但有更正：