<style type="text/css"> #myInput{ font-size: 1em; padding: 1em; } </style>
function showPass() { var icon = document.getElementById('icon'); var txt = document.getElementById('btnText'); var btn = document.getElementById('showBtn'); var x = document.getElementById('myInput'); if (x.type === 'password') { x.type = 'text'; btn.className = 'btn btn-default'; txt.innerHTML = 'Hide'; icon.className = 'fa fa-eye-slash'; } else { x.type = 'password'; btn.className = 'btn btn-primary'; txt.innerHTML = 'Show'; icon.className = 'fa fa-eye'; } }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <style type="text/css"> #myInput{ font-size: 1em; padding: 1em; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-sm-4 col-sm-offset-4"> </div> </div> </div> <script type="text/javascript"> function showPass() { var icon = document.getElementById('icon'); var txt = document.getElementById('btnText'); var btn = document.getElementById('showBtn'); var x = document.getElementById('myInput'); if (x.type === 'password') { x.type = 'text'; btn.className = 'btn btn-default'; txt.innerHTML = 'Hide'; icon.className = 'fa fa-eye-slash'; } else { x.type = 'password'; btn.className = 'btn btn-primary'; txt.innerHTML = 'Show'; icon.className = 'fa fa-eye'; } } </script> </body> </html>