Pretty Labels

index.html

<div class="input--group">
  <label for="name">Name</label>
  <input type="text" name="name" required>
</div>
<div class="input--group">
  <label for="email">Email</label>
  <input type="text" name="email">
</div>

Pretty Labels.markdown

Pretty Labels

Decided to use labels as placeholders and keep them persistent while typing.

A Pen by Scott Zirkel on CodePen.

License.

script.js

$('input').focusin(function() {
  $(this).parent().attr('class', 'input--group__active');
  $(this).css('outline-color', '#faf8f1');
});

$('input').focusout(function() {
  $(this).parent().attr('class', 'input--group');
  $(this).css('background', '#fff');
});

$('input[required]').focusin(function() {
  $(this).css('background', '#f5d8d8');
  $(this).css('outline-color', '#e3b5b5');
});

scripts

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

style.css

html { box-sizing: border-box; }
* { box-sizing: inherit; }

body {
  background: #faf8f1;
}

%input--group {
  position: relative;
  background: white;
  border: 1px solid #676159;
  width: 40em;
  height: 3em;
  display: inline-block;
  margin: 1em;
  label {
    position: absolute;
    top: 1em;
    left: 1em;
    color: #676159;
    opacity: .5;
    z-index: 2;
    transition: all 0.2s ease-in-out;
    padding-left: 2px;
    padding-right: 2px;
    font-weight: 400;
  }
  input {
    position: absolute;
    top: 0;
    left: 0em;
    height: 100%;
    width: 100%;
    padding-left: 1em;
    padding-right: 1em;
    background: transparent;
    border: 0;
  }
}

.input--group {
  @extend %input--group;
  &__active {
    @extend %input--group;
    label {
      font-weight: 700;
      transform: translate(0, -1.5em) scale(1.1, 1.1);
      background: linear-gradient(#faf8f1, #faf8f1 0.35em, transparent 0.55em, transparent);
      opacity: 1;
    }
  }
}