Toggle Password Field Visibility with a Pure CSS3 Toggle Switch

Developer
Size
2,930 Kb
Views
20,240

How do I make an toggle password field visibility with a pure css3 toggle switch?

A little Javascript and CSS to make password fields visible for better Form Usability. . What is a toggle password field visibility with a pure css3 toggle switch? How do you make a toggle password field visibility with a pure css3 toggle switch? This script and codes were developed by Vijay Gupta on 10 November 2022, Thursday.

Toggle Password Field Visibility with a Pure CSS3 Toggle Switch Previews

Toggle Password Field Visibility with a Pure CSS3 Toggle Switch - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Toggle Password Field Visibility with a Pure CSS3 Toggle Switch</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Website Title</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script> </head> <body> <div class="vz-revPass"> <input type="password" id="showPass" class="vz-revPass-input" placeholder="enter your password"> <label class="vz-revPass-switch"> <input type="checkbox" data-revPass="showPass"> <span> <i class="fa fa-eye on"></i> </span> </label> </div> </body>
</html> <script src="js/index.js"></script>
</body>
</html>

Toggle Password Field Visibility with a Pure CSS3 Toggle Switch - Script Codes CSS Codes


body { font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 1.5em; background: #EE554A;
}
body,
html { height: 100%; width: 100%;
}
*{ margin: 0; padding: 0; outline: 0; border: 0;
}
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
*:before,
*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
::-webkit-input-placeholder { color: #fff;
}
:-moz-placeholder { /* Firefox 18- */ color: #fff;
}
::-moz-placeholder { /* Firefox 19+ */ color: #fff;
}
:-ms-input-placeholder { color: #fff;
}
.vz-revPass { background: #b5342b; box-shadow: rgba(255, 255, 255, 0.2) 1px 1px 1px, inset rgba(0, 0, 0, 0.3) 1px 1px 1px; height: 36px; border-radius: 18px; overflow: hidden; max-width: 350px; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.vz-revPass-input { border: none; display: block; padding: 0 65px 0 15px; width: 100%; position: absolute; top: 0; left: 0; bottom: 0; background: none; color: #fff;
}
.vz-revPass-switch { display: inline-block; width: 50px; height: 16px; border-radius: 8px; background: #EE554A; cursor: pointer; margin: 5px; position: absolute; right: 5px; top: 5px; z-index: 4;
}
.vz-revPass-switch input[type=checkbox] { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #0f0; opacity: 0;
}
.vz-revPass-switch span { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 50px; height: 16px; border-radius: 8px; z-index: 5; box-shadow: rgba(255, 255, 255, .3) 1px 1px 0, inset rgba(0, 0, 0, 0.6) 1px 1px 1px;
}
.vz-revPass-switch span:after { content: 'OFF'; position: absolute; font-size: 10px; left: 7px; top: 1px; line-height: normal; color: #fff;
}
.vz-revPass-switch i{ visibility: hidden; line-height: 20px; width: 20px; height: 20px; border-radius: 50%; text-align: center; color: #EE554A; z-index: 10; background: #e8e8e8; box-shadow: rgba(0, 0, 0, 0.4) 0 1px 3px, rgba(0, 0, 0, 0.2) 0 0 3px, inset rgba(255, 255, 255, 1) 0 1px 1px; position: absolute; top: -2px; right: 0; -webkit-transition: 0.3s ease-in-out all; transition: 0.3s ease-in-out all;
}
.vz-revPass-switch .on { visibility: visible;
}
.vz-revPass-switch input[type=checkbox]:checked ~ span{ background: #3e9e3d;
}
.vz-revPass-switch input[type=checkbox]:checked ~ span:after { left: auto; right: 10px; top: 0; color: #fff; content: 'ON';
}
.vz-revPass-switch input[type=checkbox]:checked ~ span i{ right: 31px;
}

Toggle Password Field Visibility with a Pure CSS3 Toggle Switch - Script Codes JS Codes

/* toggle password ****************************/
$(document).on('change', '[data-revPass]', function(){ var toShow = $(this).attr('data-revPass'); if($('#'+toShow).attr('type') == 'password') { $('#'+toShow).attr('type','text'); } else { $('#'+toShow).attr('type','password'); }
})
Toggle Password Field Visibility with a Pure CSS3 Toggle Switch - Script Codes
Toggle Password Field Visibility with a Pure CSS3 Toggle Switch - Script Codes
Home Page Home
Developer Vijay Gupta
Username ivijaygupta
Uploaded November 10, 2022
Rating 3
Size 2,930 Kb
Views 20,240
Do you need developer help for Toggle Password Field Visibility with a Pure CSS3 Toggle Switch?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Vijay Gupta (ivijaygupta) Script Codes
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!