在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>

您可能希望对该方法进行一些微调，但是它应该使您大致了解如何开始。如果这是一个问题，请谨慎使用此方法，因为它使用的固定像素边距可能不适用于例如手机。

Answer 2

经验主义者给出的答案是行之有效的，它是您所要求的。但是，您当然可以通过一些动画对其进行调整：

reduce()

.input-wrapper {
  position: relative;
}

.input-wrapper .input {
  padding: 8px 16px;
  border: 2px solid #6200EE;
  border-radius: 3px;
}

.input-wrapper .input:focus+.label {
  top: -5px;
  left: 8px;
}

.input-wrapper .label {
  position: absolute;
  left: 16px;
  top: 10px;
  padding: 0 4px;
  background-color: #fff;
  font-size: 14px;
  line-height: 1;
  color: #6200EE;
  transition: all .15s ease-out;
}

Answer 3

<fieldset>元素提供了相似的样式，只需一些样式即可更改颜色，足以获得所需的内容。在下面的示例中，我没有设置输入的样式，但是您可以自己执行此操作。

示例：

fieldset {
  border: 2px solid lime;
  color: lime;
  border-radius: 5px;
}

<fieldset>
  <legend>Message:</legend>
  <input class="Message" type="text">
</fieldset>