Input Pseudo Element Placeholder

by edsinek

HTML

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-xs-12 input-container input-required">
      <label for="merchantAddress">Merchant Address</label>
      <input type="text" class="full-width" id="merchantAddress" placeholder="Merchant Address" />
    </div>
    <div class="col-xs-12 input-container input-valid">
      <label for="merchantCity">Merchant City</label>
      <input type="text" class="full-width" id="merchantCity" placeholder="Merchant City" value="" />
    </div>
    <div class="col-xs-12 input-container input-invalid">
      <label for="merchantState">Merchant State Code</label>
      <input type="text" class="full-width" id="merchantState" placeholder="Merchant State Code" value="" />
    </div>
    <div class="col-xs-12 input-container input-invalid input-required">
      <label for="merchantZip">Merchant Zip Code</label>
      <input type="text" class="full-width" id="merchantZip" placeholder="Merchant Zip Code" value="Bad Data" />
    </div>
  </div>
</div>

CSS

label {
   color: transparent;
   display: block;
 }
 
 input[type=text] {
   display: block;
   border-width: 0 0 1px !important;
   border-radius: 0;
   border-style: solid;
   border-color: rgba(0, 0, 0, 0.12);
 }
 
 .input-focused:not(.input-invalid) label {
   color: rgb(16, 108, 200);
 }
 
 .input-focused:not(.input-invalid) input[type=text] {
   border-color: rgb(16, 108, 200);
 }
 
 .input-has-value:not(.input-invalid):not(.input-focused) label {
   color: #595959;
 }
 
 .input-invalid.input-focused label,
 .input-invalid.input-has-value label {
   color: #ff0000;
 }
 
 .input-invalid input[type=text] {
   border-color: #ff0000;
 }
 
 .input-invalid input[type=text]::-webkit-input-placeholder {
   color: #ff0000;
 }
 
 .input-invalid input[type=text]::-webkit-input-placeholder::after {
   content: "\2716"; // "X"
   font-size: 18px;
   color: #ff0000;
   padding-right: 0;
   float: right;
 }
 
 .input-valid input[type=text]::-webkit-input-placeholder::after {
   content: "\2714"; // checkmark
   font-size: 18px;
   color: #438D5B;
   padding-right: 0;
   float: right;
 }

JavaScript

var addFormFocusEventHandler = function() {
      var placeholder;
      // using the document syntax in case input & container added to DOM dynamically
      $(document).on("focus", "div.input-container :input", function() {
        $(this).closest("div.input-container").addClass("input-focused");
        placeholder = $(this).prop("placeholder");
        $(this).prop("placeholder", " ");
      }).on("blur", "div.input-container :input", function() {
        $(this).closest("div.input-container").removeClass("input-focused");
        $(this).prop("placeholder", placeholder);
        placeholder = "";
      });
    };
    var addFormValueEventHandler = function() {
      // using the document syntax in case input & container added to DOM dynamically
      $(document).on("blur", "div.input-container :input", function() {
        if ($(this).val()) {
          $(this).closest("div.input-container").addClass("input-has-value");
        } else {
          $(this).closest("div.input-container").removeClass("input-has-value");
        }
      });
    };

    var initialize = function() {
      addFormFocusEventHandler();
      addFormValueEventHandler();
    };

    initialize();