"Login with show/hide password"
Bootstrap 3.3.0 Snippet by imsachin

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <title>HTML</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!--[if IE]> <link href="~/Content/NewHomePage/all-ie-only.css" rel="stylesheet" /> <![endif]--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container-fluid"> <div class="row"> <div class="well center-block"> <div class="well-header"> <center><img src="http://www.kisanpoint.com/mrb/includes/images/design_stuff/default_user_icon.png" class="img-thumbnail img-circle img-responsive" height="80px;" width="80px;"></center> <h1 class="text-center" style="color: white;">Login</h1><hr> </div> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <div class="input-group"> <div class="input-group-addon"> <span class="glyphicon glyphicon-user"></span> </div> <input type="text" placeholder="User Name" id="uname" name="uname" class="form-control"> <div class="input-group-btn"> <button type="button" id="remove" data-val="1" class="btn btn-default btn-md"> <span class="glyphicon glyphicon-remove"></span></button> </div> </div> </div> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <div class="input-group"> <div class="input-group-addon"> <span class="glyphicon glyphicon-lock"></span> </div> <input type="password" id="pwd" class="form-control" placeholder="Password" name="pass"> <span class="input-group-btn"> <button class="btn btn-default btn-md" id="showhide" data-val='1'><span id='eye' class="glyphicon glyphicon-eye-open"></span></button> </span> </div> </div> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="col-xs-6 col-sm-6 col-md-6"> <input type="checkbox" name="check" checked> Remember Me </div> <div class="col-xs-6 col-sm-6 col-md-6"> <a href="#"> Join Us Now! </a> </div> </div> </div> <br> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="col-xs-6 col-sm-6 col-md-6"> <button type="submit" class="btn btn-lg btn1 btn-block"> Login</button> </div> <div class="col-xs-6 col-sm-6 col-md-6"> <a href="https://www.facebook.com/" target="_blank" class="btn btn2 btn-primary btn-block btn-lg"> Login with FB</a> </div> </div> </div> </div> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="custom.js"></script> </body> </html>
.well { padding: 35px; padding-left: 30px; box-shadow: 0 0 50px #666666; margin: 7% auto 0; width: 450px; background: rgba(0.4, 0, 0, 0.4); } .btn1 { background-color: #FF3838; color: white; transition: all 0.5s; } .btn1:hover, .btn1:focus { background-color: white; color: black; border: 1px solid; border-color: #FF3838; transition: 0.5s; } a:hover { text-decoration: none; color: red; } body { background: url('http://cdn.pcwallart.com/images/nature-wallpapers-high-resolution-wallpaper-4.jpg'); } .well-header { background-color: #FF3838; } .input-group-addon { background-color: #FF3838; border-color: #FF3838; color: white; } .btn2 { transition: all 0.5s; } .btn2:hover, .btn2:focus { border-color: #428bca; color: black; background-color: white; transition: 0.5s; }
$(document).ready(function(){ $('.pass_show').append('<span class="ptxt">Show</span>'); }); $(document).on('click','.pass_show .ptxt', function(){ $(this).text($(this).text() == "Show" ? "Hide" : "Show"); $(this).prev().attr('type', function(index, attr){return attr == 'password' ? 'text' : 'password'; }); });

Related: See More

Paper Dashboard React
Creating password field text hide show via a single class
login-form
Login Form

Questions / Comments: