CSS 输入字段设计

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

---

想要改进这个问题吗？通过编辑这篇文章来更新问题，使其仅关注一个问题。

2 年前已关闭。

Answer 1

您可以尝试在表单元素中使用 fieldset。

<fieldset>
  <legend>
    <label for="username">Username</label>
  </legend>
  <input type="text" id="username" name="username">
</fieldset>

之后，您可以尝试在 css 中编辑样式。可能是为了去掉输入的边框并更改框的宽度。

Answer 2

使用 :before 进行基本演示。

input {
  border: transparent;
  text-align: left;
}

input::placeholder {
  text-align: center;
}

input:focus {
  outline: transparent;
}

.line {
  border: 1px solid black;
  border-radius: 5px;
  width: fit-content;
  padding: 10px 0px 5px 0px;
}

.line:before {
  content: "username";
  position: absolute;
  top: 0;
  left: 20px;
  background-color: white;
  padding: 0 2px;
}

<div class="line">
<input type="text" placeholder="[email protected]">
</div>