JSFiddle - React, Tailwind, and code Playground

Styled Labels/Place Holders

by Jennifer Perrin

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<div class="title">
    <h1>Styled Labels</h1>
    <p>Based off a guide by Chris Coyier, adapted to use multiple placeholders (works better as a directive/web component).</p>
</div>
<div class="fancy-input">
    <div class="input-container">
        <input pattern=".{3,}" required="required" />
        <label data-placeholder="First Name" data-placeholder-short="First"><span class="sr-only">First Name</span>
        </label>
    </div>
</div>
<div class="fancy-input">
    <div class="input-container">
        <input min-length=".{3,}" required="required" />
        <label data-placeholder="Last Name" data-placeholder-short="Last"><span class="sr-only">Last Name</span>
        </label>
    </div>
</div>

CSS

* {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}

.fancy-input {
  display: block;
  width: 100%;
  min-width: 200px;
  max-width: 400px;
  margin: 1em auto;
  font-size: 1em;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.fancy-input .input-container {
  position: relative;
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 500px;
  min-width: 200px;
  overflow: hidden;
  background: #fff;
}
.fancy-input input {
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 1em;
  z-index: 1;
  font-size: 1em;
  line-height: 2;
  outline: 0;
  background: none;
  border: 2px solid #969696;
  -webkit-transition: border-color 0.2s;
          transition: border-color 0.2s;
}
.fancy-input input:valid {
  background: #fff;
}
.fancy-input input:not(:empty) + label {
  display: none;
}
.fancy-input input:focus {
  border-color: #FF0000;
}
.fancy-input input:focus:valid {
  border-color: #3cf;
}
.fancy-input input:focus:valid + label {
  background: #3cf;
}
.fancy-input input:focus + label {
  z-index: 2;
  height: 100%;
  width: 40%;
  right: 0;
  margin-right: 0;
  padding-left: 3em;
  color: white;
  background: #FF0000;
}
.fancy-input input:focus + label:before {
  content: ' ';
  position: absolute;
  top: 2px;
  left: 0;
  width: 0;
  height: 0;
  border-top: 2.2em solid #fff;
  border-right: 2.2em solid transparent;
}
.fancy-input input:focus + label:after {
  content: attr(data-placeholder-short);
}
.fancy-input label {
  position: absolute;
  right: 100%;
  width: 100%;
  top: 0;
  bottom: 0;
  margin-right: -100%;
  line-height: 2.5;
  padding-left: 1em;
  font-size: 1em;
  color: rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
  -webkit-transition: background 0.2s, color 0.2s, top 0.2s, bottom 0.2s, right 0.2s, left 0.2s;
          transition: background 0.2s, color 0.2s, top 0.2s, bottom 0.2s,...

JavaScript

// Bootstrap v3.1.0
// Font Awesome 4.1.0