Если поддержка IE8 не нужна, то:
<!DOCTYPE html>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<style>
input{
vertical-align: middle;
font-family: "Lucida Console", Monaco, monospace;
}
input::-ms-reveal,
input::-ms-clear
{
display: none;
}
.password-reveal{
border: none;
padding: 0;
width: 1.3em;
height: 1.2em;
margin-left: -1.9em;
vertical-align: middle;
background: none;
color: #555;
cursor: default;
}
.password-reveal:hover{
color: #222;
}
</style>
<span class="input-wrap">
<input type="password" value="password" />
<button tabindex="-1" aria-hidden="true" class="password-reveal" type="button"><span class="fa fa-eye"></span></button>
</span>
<script>
(function() {
var eye = document.querySelector('.password-reveal');
eye.onmousedown = function() {
return false;
};
eye.onclick = function() {
var input = this.previousElementSibling;
var selection = {start: input.selectionStart, end: input.selectionEnd};
input.type = {text: 'password', password: 'text'}[input.type];
input.selectionEnd = selection.end;
input.selectionStart = selection.start;
return false;
};
})();
</script>