Anton Temchenko Anton Temchenko - 2 months ago 6
CSS Question

How to make dots on input PIN showing character amount to provide?

I need to create input with dots showing amount of characters required, and to hide one after other when characters provided:

enter image description here

What is the best way to do this?

I haven't come up with anything smart but drawing circles with

position: absolute
and add/remove them with js (on keydown or change). But that could fail, because of difference of character width (for ex.
i
and
W
)

Answer

Because @Santi proposed you the solution with jQuery, I've made a jsFiddle with usage of angular.

<div ng-controller="MyCtrl">
  <span class="mask">•••••</span>
  <span class="hider">{{val}}</span>
  <input type="text" class="code" ng-model="val" maxlength="5" />
</div>

So I've created input which has no border and outline. Below it on the bottom there is a span mask which has dots that you want. And above mask there is a hider where angular writes value from input so the background rise with the content and hide dots in mask span.

If you use angular in your project you could probably change my jsFiddle to directive.

Additionally IMHO it could be easly changed to jQuery option or even to pure javascript;

PS. Please be respectful for me, because I'm not very best in css.