Float Labels

In this example below you will see how to do a Float Labels with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 007design, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 007design ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Float Labels</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <form data-ng-app="placeholder" class="placeholder">
  <div class="form-control">
    <select name="registered_nurse" data-ng-model="registered_nurse" placeholder="Are you awesome?">
      <option value=""></option>
      <option value="N">No</option>
      <option value="Y">Yes</option>
    </select>
  </div>
  <div class="form-control">
    <input type="tel" data-ng-min-length="5" maxlength="5" name="zipcode" placeholder="Zip Code" data-ng-model="zipcode">
  </div>
</form>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/007design/float-labels-PjzqJV */
/* ADDS A BROWSER PREFIX TO THE PROPERTY */
.form-control {
  padding: 0 5px 5px 0;
}
.form-control input, .form-control select {
  -webkit-border-radius: 4px;
  -khtml-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  background-color: #fff;
  width: 100%;
  height: 40px;
  border: 1px solid #72635d;
  padding: 4px;
  font-size: 0.8em;
  color: #72635d;
}

.placeholder .form-control {
  position: relative;
}
.placeholder .form-control input[type="text"],
.placeholder .form-control input[type="number"],
.placeholder .form-control input[type="email"],
.placeholder .form-control input[type="tel"],
.placeholder .form-control input[type="password"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.placeholder .form-control input[type="text"]::-webkit-input-placeholder,
.placeholder .form-control input[type="number"]::-webkit-input-placeholder,
.placeholder .form-control input[type="email"]::-webkit-input-placeholder,
.placeholder .form-control input[type="tel"]::-webkit-input-placeholder,
.placeholder .form-control input[type="password"]::-webkit-input-placeholder {
  color: transparent;
}
.placeholder .form-control input[type="text"]:-moz-placeholder,
.placeholder .form-control input[type="number"]:-moz-placeholder,
.placeholder .form-control input[type="email"]:-moz-placeholder,
.placeholder .form-control input[type="tel"]:-moz-placeholder,
.placeholder .form-control input[type="password"]:-moz-placeholder {
  color: transparent;
}
.placeholder .form-control input[type="text"]::-moz-placeholder,
.placeholder .form-control input[type="number"]::-moz-placeholder,
.placeholder .form-control input[type="email"]::-moz-placeholder,
.placeholder .form-control input[type="tel"]::-moz-placeholder,
.placeholder .form-control input[type="password"]::-moz-placeholder {
  color: transparent;
}
.placeholder .form-control input[type="text"]:-ms-input-placeholder,
.placeholder .form-control input[type="number"]:-ms-input-placeholder,
.placeholder .form-control input[type="email"]:-ms-input-placeholder,
.placeholder .form-control input[type="tel"]:-ms-input-placeholder,
.placeholder .form-control input[type="password"]:-ms-input-placeholder {
  color: transparent;
}
.placeholder .placeholder-text {
  font-family: sans-serif;
  cursor: text;
  color: #999;
  left: 7px;
  position: absolute;
  top: 16px;
  -webkit-transition: all 0.2s linear;
  -khtml-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.disabled .placeholder .placeholder-text {
  color: #aaa;
}
.placeholder .float-label {
  font-family: sans-serif;
  font-size: 0.6em;
  left: 7px;
  position: absolute;
  top: 2px;
}
.placeholder .float-label.ng-hide-add.ng-hide-add-active,
.placeholder .float-label.ng-hide-remove.ng-hide-remove-active {
  -webkit-opacity: 1;
  -khtml-opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  opacity: 1;
  -webkit-transition: all 0.2s linear;
  -khtml-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.placeholder .float-label.ng-hide {
  -webkit-opacity: 0;
  -khtml-opacity: 0;
  -moz-opacity: 0;
  -ms-opacity: 0;
  -o-opacity: 0;
  opacity: 0;
  z-index: -1;
}
.placeholder .placeholder-text.ng-hide-add.ng-hide-add-active,
.placeholder .placeholder-text.ng-hide-remove.ng-hide-remove-active {
  font-size: 1em;
}
.placeholder .placeholder-text.ng-hide {
  font-size: 0.7em;
  -webkit-opacity: 0;
  -khtml-opacity: 0;
  -moz-opacity: 0;
  -ms-opacity: 0;
  -o-opacity: 0;
  opacity: 0;
  z-index: -1;
}


/*Downloaded from https://www.codeseek.co/007design/float-labels-PjzqJV */
"use strict"

angular.module('placeholder', [])

.directive('placeholder', ['$compile', '$timeout', function($compile, $timeout) {
  var tmpl = '<div data-ng-click="focus()"><div class="placeholder-text" data-ng-hide="hasFocus" data-ng-bind="placeholder"></div>' +
  '<div class="float-label" data-ng-show="hasFocus" data-ng-bind="placeholder"></div></div>';

  var linkFn = function(scope, elem, attrs, ctrl) {
    // Add the template and compile it into the scope
    // We can't do this in the compile function as it would be
    // outside the element and not compiled into the scope
    elem.after($compile(tmpl)(scope));

    elem.on('focus', function() {
      // We use $timeout here to schedule the property update to be processed
      // in the next $digest.  If we used $apply we'd potentially get an "already running" error
      // as the focus event could come from a click or a tab
      $timeout(function() {
        scope.hasFocus = true;
      });
    }).on('blur', function() {
      // This line deals with chrome not returning non-numeric values
      // with val() when they're entered into an input of type number
      elem.val(elem.val());
      // Here we need to call apply to update the property
      // This won't ever be called while a digest is already running
      scope.$apply(function() {
        if (!elem.val()) scope.hasFocus = false;
      });
    });

    // Respond to view value changes
    ctrl.$viewChangeListeners.push(function() {
      scope.hasFocus = ctrl.$viewValue ? true : false;
    });

    scope.$watch(function() {
      return elem.is(':disabled');
    }, function(disabled) {
      scope.hasFocus = ctrl.$viewValue ? true : false;
    });

    // Focuses on field when the placeholder is clicked
    scope.focus = function() {
      elem[0].focus();
      scope.hasFocus = true;
    };
  };

  return {
    restrict: 'A',
    scope: {
      placeholder: '@'
    },
    require: 'ngModel',
    link: linkFn
  };
}]);

Comments