show and hide password | show and hide password using HTML CSS JavaScript – Code With Random

show and hide password | show and hide password using html css javascript - codewithrandom

Welcome🎉 to Code With Random blog. In this blog, we learn that how we create a show and hide password. We use HTML, Css, and javascript for this show and hide passwords. Hope you enjoy our blog so let’s start with a basic HTML structure for a  show and hide password. 

font awesome cdn

 <link rel="stylesheet" href="" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />  

HTML code

   <div class="password-field">  
<input type="password" id="fakePassword" placeholder="Enter Password" />
<span><i id="toggler"class="far fa-eye"></i></span>

There is all HTML code for the show and hide the password. Now, you can see output without CSS, then we write css & javascript for the show and hide password.

 * {  
padding: 0;
margin: 0;
box-sizing: border-box;
body {
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f4f4f4;
flex-direction: column;
body .password-field {
position: relative;
body .password-field input {
width: 30rem;
height: 4em;
padding: 1em;
border: 0;
border-radius: 10px;
box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.5);
font-size: 1rem;
letter-spacing: 1px;
body .password-field input::placeholder {
color: #000;
font-weight: bold;
body .password-field #toggler {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;

Now we have completed our CSS section,  Here is our updated output CSS.


Now add javascript for toggle show and hide password.

Javascript code

 var password = document.getElementById('fakePassword');  
var toggler = document.getElementById('toggler');
showHidePassword = () => {
if (password.type == 'password') {
password.setAttribute('type', 'text');
} else {
password.setAttribute('type', 'password');
toggler.addEventListener('click', showHidePassword);

Final output

Now we have completed our javascript section,  Here is our updated output with javascriptHope you like the show and hide password . you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create a  show and hide password  using simple HTML & CSS and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

Leave a Reply