Placeholder position when input has text

Question

How to do placeholder styling when Input Text are focus, the placeholder are still visible and the font-size become smaller. For example like this:

I only need webkit support. Does webkit support such thing?

Answer 1

.input {
  width: 200px;
  height: 35px;
  outline:0;
  padding:0 10px;
}
.label { position: absolute;
  pointer-events: none;
  left: 20px;
  top: 18px;
  transition: 0.2s ease all;
}
input:focus ~ .label,
input:not(:focus):valid ~ .label{
  top: 10px;
  bottom: 5px;
  left: 20px;
  font-size: 12px;
}

<div>
  <input type="text" class="input" required/>
  <span class="label">Company Name</span>
</div>