how to move placeholder to top on focus and while typing-CodePudding

I am trying to implement a simple input box where when I click on the box the placeholder value moves to the top but have an issue that it always shows on top.

Here is the code
https://codesandbox.io/s/magical-glitter-7ykhm?file=/src/styles.css

CodePudding user response：

An alternate way to do it is to create your own custom placeholder (a label) which is much easier to manipulate with 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 >
  <input required/>
  <label>Name</label>
</div>

CodePudding user response：

Well what you currently have isn't a placeholder, did you mean doing something like this? my simplified code here