Reveal password toggle

Developer
Michael Lee
Size
3,037 Kb
Views
6,072
  1. Reveal password toggle Previews
  2. Reveal password toggle HTML Codes
  3. Reveal password toggle CSS Codes
  4. Reveal password toggle JS Codes

How do I make an reveal password toggle?

This is demonstrating a simple reveal password toggle for password input fields.. What is a reveal password toggle? How do you make a reveal password toggle? This script and codes were developed by Michael Lee on 20 January 2023, Friday.

Reveal password toggle Previews
IQ Test

Reveal password toggle - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Reveal password toggle</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="centerer"> <p>Type in a password and click on the toggle</p> <input type="password" class="password" /> <div class="toggle ml2"> <div class="toggle-button"></div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Reveal password toggle - Script Codes CSS Codes

@charset "UTF-8";
.ml2 { margin-left: 2rem;
}
.toggle { background: #ccc; border-radius: 40em; cursor: pointer; display: inline-block; padding: 1px; position: relative; width: 40px; height: 1.25rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; vertical-align: middle;
}
.toggle:before, .toggle:after { color: #777777; position: absolute; top: 50%; -webkit-transform: translatey(-50%); transform: translatey(-50%);
}
.toggle:before { content: "✱✱✱"; font-size: 10px; right: 110%;
}
.toggle:after { content: "ABC"; font-size: 12px; left: 110%;
}
.toggle.is-alpha .toggle-button { left: 21px;
}
.toggle-button { background: #fff; border-radius: 40em; display: inline-block; height: 1.25rem; width: 1.25rem; position: absolute; left: 1px; top: 1px; -webkit-transition: left 0.05s linear; transition: left 0.05s linear;
}
.centerer { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}

Reveal password toggle - Script Codes JS Codes

(function() { $(".toggle").on("click", function() { var password, type; password = $(".password"); type = password.attr("type"); if (type === "password") { password.attr("type", "text"); return $(this).addClass("is-alpha"); } else { password.attr("type", "password"); return $(this).removeClass("is-alpha"); } });
}).call(this);
Reveal password toggle - Script Codes
Reveal password toggle - Script Codes
Home Page Home
Developer Michael Lee
Username michaellee
Uploaded January 20, 2023
Rating 4
Size 3,037 Kb
Views 6,072
Do you need developer help for Reveal password toggle?

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!

Michael Lee (michaellee) Script Codes
Name
Pure CSS Ruby Illustration
Mountains Illustration
IOS Messages Typing Bubble
SVG Triforce
Current time clock icon
A Pen by Michael Lee
Breathing Giphy Logo
Stop Using Corner Banners
SVG Hearts
Axe the Hamburger, Hail the Tab Bar
Create amazing blog posts 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!