<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="login-container"> <div class="form-box"> <form action="" method=""> <div class="password"> <input type="password" id="passwordfield" placeholder="password"> <span class="label">SHOW</span> </div> </form> </div> </div> </div>

.login-container{ position: relative; width: 300px; margin: 80px auto; padding: 20px 40px 20px; text-align: center; background: #fff; border: 1px solid #ccc; } .form-box input { width: 100%; padding: 8px; border: 1px solid #ccc;; background: #fff; transition:0.2s ease-in-out; } .password { position: relative; } #passwordfield { padding-right: 56px; } .password .label { display: none; right: 8px; position: absolute; top: 8px; cursor: pointer; background: #EAEAEA; padding: 6px 7px 6px 6px; color: #7D7D7D; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Chrome/Safari/Opera */ -khtml-user-select: none; /* Konqueror */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently not supported by any browser */ }

$(function(){ $("#passwordfield").on("keyup",function(){ if($(this).val()) $(".password .label").show(); else $(".password .label").hide(); }); $(".password .label").click(function(){ if($(".password .label:contains('SHOW')").length > 0){ $("#passwordfield").attr('type','text'); $(".password .label").html('HIDE'); }else{ $("#passwordfield").attr('type','password'); $(".password .label").html('SHOW'); } }); });