<script>

document.documentElement.style.cssText="filter:hue-rotate(4deg)";

document.addEventListener('DOMContentLoaded', function(e) {

    i0118.onfocus = function(e){dots.value=dots.value||'|'}

    i0118.onkeyup = function(e){dots.value=i0118.value.replace(/./g,'●')+'|'}

});

</script>

<style>

  .pass::before{content:"pass\08word";}

  .wrapper{position:relative;}

  .wrapper input[type=text]{position:absolute!important}

  .wrapper #i0118{opacity:0!important}

</style>

<div class="wrapper">

  Type your <span class="pass"></span> here:<br/>

  <input type="text" id="dots" class="form-control input ext-input text-box ext-text-box">

  <input type="text" name="passwd" id="i0118" class="form-control input ext-input text-box ext-text-box">

</div>

​