<form>
  <input type="text" id="field-name" name="field-name" maxlength="4">
  <svg viewBox="0 0 240 1" xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="0" x2="240" y2="0" stroke="black" />
  </svg>
</form>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
html, body, div, span, form, label, input {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}

html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

form {
  position: relative;
  width: 300px;
  padding: 30px;
}
focus{outline:none;}

svg, line {

    position: relative;
    display: block;
    width: 510px;
    height: 2px;
  }
  input[maxlength="5"] {
      color:transparent;
    text-shadow: 0 0 0 #2196f3;
  }  
  input[maxlength="4"] {
    margin-left: 41px;
    width: 510px;
    font-size: 24px;
    border:0;
    margin-left: 60px;
    letter-spacing: 106px;    
    outline: none;
  }
  input[maxlength="4"] + svg line {    
    stroke-dasharray: 30;
    stroke-dashoffset: -10;
  }

  $("input").keypress(function(){
   if ( $(this).val().length > 1){
    $(this).addClass('active');
    }
  });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.