<label class="effinp"><input type="number">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</label>

.effinp{
  display: block;
  font-family: sans-serif;
  text-align: center;
}
.effinp input{
  width: 0;
  height: 0;
  border: 0;
  opacity: 0;
}
.effinp span{
  display: inline-block;
  padding: 1em 0.5em;
  margin: 0.2em;
  width: 1em;
  height: 1em;
  border: 0.2em solid #666;
  border-radius: 0.5em;
  overflow: hidden;
  text-align: center;
  transition: all 0.3s;
}
.effinp span.focus{
  box-shadow: 0 0  0.3em 0.1em #88a;
  border-color: #779;
}
.effinp.full span{
  box-shadow: 0 0  0.3em 0.1em #8a8;
  border-color: #797;
}
.effinp span:before{
  --dig: inherit;
  content: '– 0 1 2 3 4 5 6 7 8 9';
  display: block;
  line-height: 3em;
  width: 1em;
  margin-top: calc( -3em * ( var(--dig) + 1.3 ) );
  transition: all 0.3s;
}

const ec = document.querySelector( '.effinp' );
const ei = document.querySelector( '.effinp input' );
const es = document.querySelectorAll( '.effinp span' );
ei.oninput = () => {
  ei.value = ei.value.slice(0,es.length);
  const li = [ ...ei.value ];
  const k = ei.value.length;
  es.forEach( ( s, i ) => {
    s.style.setProperty( '--dig', li[i] );
    s.classList.toggle( 'focus', i === k );
  } );
  ec.classList.toggle( 'full', k === es.length );
}
ei.onfocus = () => {
  ei.value = '';
  //const l = ei.value.length;
  //setTimeout( () => ei.setSelectionRange( 0, 0 ), 1 );
  ei.oninput();
}
ei.onblur = () => {
  document.querySelectorAll( '.effinp span.focus' ).forEach(
    s => s.classList.remove( 'focus' ) );
}