html - 如何在焦点和打字时将占位符移至顶部

Question

我正在尝试实现一个简单的输入框，当我单击该框时，占位符值会移动到顶部，但有一个问题，它总是显示在顶部。

这是代码
https://codesandbox.io/s/magical-glitter-7ykhm?file=/src/styles.css

Answer 1

另一种方法是创建您自己的自定义占位符(标签)，这更容易使用 css 进行操作。

body {
  background: #111;
}

.input-wrap {
  position: relative;
  margin: 40px;
}

.input-wrap input {
  background: none;
  color: #c6c6c6;
  font-size: 18px;
  padding: 10px;
  display: block;
  width: 320px;
  border: none;
  border-bottom: 1px solid #ccc;
}

.input-wrap label {
  position: absolute;
  color: #c6c6c6;
  font-size: 16px;
  font-weight: normal;
  pointer-events: none;
  left: 10px;
  top: 10px;
  transition: 300ms ease all;
}

input:focus {
  outline: none;
}

.input-wrap input:focus~label,
.input-wrap input:valid ~ label{
  top: -14px;
  font-size: 12px;
  color: #328dd2;
}

<div class="input-wrap">
  <input required/>
  <label>Name</label>
</div>