input optherium

by Yuriy Petrichenko

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<input id="optheriumInput" maxlength='4' type="password"/>

CSS

input {
  display: block;
  margin: 2em auto;
  border: none;
  padding: 0;
  width: 6ch;
  background: repeating-linear-gradient(90deg, dimgrey 0, dimgrey 1ch, transparent 0, transparent 1.5ch) 0 100%/5.5ch 2px no-repeat;
  font: 7ch droid sans mono, consolas, monospace;
  letter-spacing: 0.5ch;
}
input:focus {
  outline: none;
  color: dodgerblue;
}

JavaScript

var inp = document.getElementById('optheriumInput');

inp.oninput = function() {
	if(inp.value.length === 4) {
		inp.style.color = 'transparent';
    inp.style.textShadow ='0 0 0 black'
	}else {
  inp.style.color = 'dodgerblue';
  }
};