<label for="input" class="input">
  <input type="text" placeholder="&nbsp;">
  <span class="label">お名前</span>
  <span class="border"></span>
</label>
* {
  margin: 0;
  padding: 0;
}
.input {
  display: inline-block;
  position: relative;
  width: 100%;
  max-width: 280px;
  margin: 30px;
}
.input .label {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  font-size: 16px;
  color: #999;
  transform-origin: 0 0;
  transition: all 0.3s ease;
}
.input .border {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: #034132;
  transform: scaleX(0);
  transform-origin: 0 0;
  transition: all 0.15s ease;
}
.input input {
  width: 100%;
  border: 0;
  padding-top: 18px;
  padding-left: 10px;
  height: 50px;
  font-size: 16px;
  border-bottom: 2px solid #EF9698;
  background: none;
  border-radius: 0;
  color: #222;
  transition: all 0.15s ease;
}
.input input:hover {
  background: #efefef;
}
.input input:not(:placeholder-shown) + span {
  color: #5a667f;
  transform: translateY(-26px) scale(0.75);
}
.input input:focus {
  background: none;
  outline: none;
}
.input input:focus + span {
  color: #034132;
  transform: translateY(-26px) scale(0.75);
}
.input input:focus + span + .border {
  transform: scaleX(1);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.