在 CSS 中创建 Googlelike 的输入

Question

我必须重新创建一个input类似于 Google Material Theme 的主题。

这是我想要实现的目标：

我知道框架/库可以做到这一点，但这是一项家庭作业，我必须完全做到。

这是我的实际代码：

input {
  margin-top: -6px;
  margin-bottom: 30px;
  border: solid 2px #00ffb3;
  border-radius: 3px;
  height: 30px;
}

label {
  margin-left: 8px;
  font-weight: lighter;
}

<div class="input">
  <label for="text">Message</label>
  <input class="Message" type="text">
</div>

Answer 1

您需要绝对定位您的标签：

.input {
  margin-top: 5px
}

input {
  margin-bottom: 30px;
  border: solid 2px #00ffb3;
  border-radius: 3px;
  height: 30px;
}

label {
  margin-left: 8px;
  font-weight: lighter;
  position: absolute;
  margin-top: -10px;
  background: #fff;
  padding: 0 5px;
}

<div class="input">
  <label for="text">Message</label>
  <input class="Message" type="text">
</div>

您可能想稍微调整该方法，但它应该让您对如何开始有一个大致的了解。如果这是一个问题，请注意这种方法的响应性，因为它使用固定的像素边距，可能不适用于例如移动电话。