input :not(:placeholder-shown)

index.html

<label for="inp" class="inp">
  <input type="text" id="inp" placeholder="&nbsp;">
  <span class="label">Label</span>
  <span class="border"></span>
</label>

input-not-placeholder-shown.markdown

input :not(:placeholder-shown)

A Pen by Andreas Storm on CodePen.

License.

style.stylus

html, body
  height: 100%

body
  display: grid
  font-family: Avenir
  -webkit-text-size-adjust: 100%
  -webkit-font-smoothing: antialiased
  
*
  box-sizing: border-box
  
.inp
  position: relative
  margin: auto
  width: 100%
  max-width: 280px
  //transform: rotateX(45deg) rotateY(-10deg) rotate(25deg) scale(2)
  .label
    position: absolute
    top: 16px
    left: 0
    font-size: 16px
    color: #9098A9
    font-weight: 500
    transform-origin: 0 0
    transition: all .2s ease
  .border
    position: absolute
    bottom: 0
    left: 0
    height: 2px
    width: 100%
    background #0077FF
    transform: scaleX(0)
    transform-origin: 0 0
    transition: all .15s ease
  input
    -webkit-appearance: none
    width: 100%
    border: 0
    font-family: inherit
    padding: 12px 0
    height: 48px
    font-size: 16px
    font-weight: 500
    border-bottom: 2px solid #C8CCD4
    background: none
    border-radius: 0
    color: #223254
    transition: all .15s ease
    &:hover
      background: rgba(#223254,.03)
    &:not(:placeholder-shown)
      + span
        color #5A667F
        transform: translateY(-26px) scale(.75)
    &:focus
      background: none
      outline: none
      + span
        color #0077FF
        transform: translateY(-26px) scale(.75)
        + .border
            transform: scaleX(1)