CSS输入域设计

Question

我需要做一个像下图这样的输入框。

我正在使用物化和 CSS。

Answer 1

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

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

之后，您可以尝试在 css 中编辑样式。大概是把input的边框去掉，改变box的宽度。

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="me@example.com">
</div>

CSS输入域设计

CSS Input field design

html

css

input

responsive-design

materialize