subr.pw

index.html

<form>
  
  <div class="input-field full">
    <label for="email">Long URL</label>
    <input id="email" type="email">
    
  </div><span class="title">0 New shortlinks</span>
</form>

script.js

$('input').focus(function(){
  var label = $("[for='" + $(this).attr('id') + "']")
  label.addClass('raised highlight')
})
$('input').blur(function(){
  var label = $("[for='" + $(this).attr('id') + "']")
  label.removeClass('highlight')
  if($(this).val().length == 0){
    label.removeClass('raised')
  }
})

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: "proxima-nova";
  background: #001F3F;
}

form {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 4rem auto 0;
  max-width: 26rem;
}

.title {
  color: rgba(255, 255, 255, .4);
  font-family: "proxima-nova";
  padding: 0rem .5em 2em;
  font-size: .6rem;
  text-transform: uppercase;
  font-weight: 100;
  letter-spacing: 2px;
}

.input-field {
  padding: 0 .5em 2em;
}

.input-field.half {
  flex: 1 0 50%;
}

.input-field.full {
  flex: 2 0 100%;
}

label {
  font-family: "proxima-nova";
  display: block;
  position: relative;
  z-index: -9;
  top: 1.5rem;
  color: rgba(255, 255, 255, .4);
  font-size: .875rem;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 2px;
  transition: top .3s ease, color .3s ease;
}

label.raised {
  top: 0rem;
}

label.highlight {
  color: rgba(255, 255, 255, .6);
}

[type="text"],
[type="email"] {
  color: rgba(255, 255, 255, .4);
  font-family: "proxima-nova";
  padding: .25rem 0 0;
  font-size: 1.25rem;
  font-weight: 400;
  width: 100%;
  border: none;
  border-bottom: 1px solid;
  background: none;
  transition: color .3s ease;
}

[type="text"]:focus,
[type="email"]:focus {
  color: rgba(255, 255, 255, 1);
  outline: 0;
}

subr.pw.markdown

subr.pw

I've seen a few of these around, and I like the style a lot, but they always seem to be overdeveloped.

This is my attempt to make a simpler version that takes up a lot less code space.

Forked from Christopher Moody's Pen Traveling Label Forms.

Forked from Christopher Moody's Pen Traveling Label Forms.

A Pen by Miles on CodePen.

License.