Jun 21, 2022
Show Hide Password
CSS 497 views
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Show Hide Button for Password Field</title>
<style>
* {
margin: 0;
padding: 0;
outline: 0;
}
body {
background-color: #383838;
}
section {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
input[type=password],
input[type=text] {
padding: 6px 15px;
font-size: 18px;
border: none;
border-radius: 5px;
}
.inputArea {
position: relative;
}
.inputArea a#toggleEye {
position: absolute;
top: 6px;
right: 15px;
cursor: pointer;
}
.inputArea a#toggleEye svg {
width: 20px;
height: 20px;
}
.inputArea a#toggleEye svg path {
fill: #282828;
}
.inputArea a#toggleEye.hide svg.show,
.inputArea a#toggleEye svg.hide {
display: none;
}
.inputArea a#toggleEye.hide svg.hide,
.inputArea a#toggleEye svg.show {
display: block;
}
</style>
<script>
function togglePassword() {
let input = document.getElementById("password");
let eyeIco = document.getElementById("toggleEye");
if(input.type === 'password') {
input.type = 'text';
eyeIco.classList.add('hide');
} else {
input.type = 'password';
eyeIco.classList.remove('hide');
}
}
</script>
</head>
<body>
<section>
<form action="">
<div class="inputArea">
<input type="password" name="" id="password" placeholder="Password" />
<a onclick="togglePassword()" id="toggleEye">
<svg class="hide" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 497.301 497.301" style="enable-background:new 0 0 497.301 497.301;" xml:space="preserve">
<g>
<path d="M97.5,342.351C30.6,302.15,0,248.65,0,248.65s76.5-133.9,248.6-133.9c24.9,0,47.8,1.9,68.8,7.6l-15.301,15.3
c-17.199-1.9-34.4-3.8-53.5-3.8c-153,0-225.7,114.8-225.7,114.8s28.7,45.9,88,80.3L97.5,342.351z M172.1,248.65
c0,5.7,0,11.5,1.9,17.2l17.2-17.2c0-15.3,5.7-28.7,17.2-40.2s26.8-17.2,40.2-17.2l17.201-17.2c-5.701-1.9-11.5-1.9-17.201-1.9
C206.5,172.15,172.1,206.55,172.1,248.65z M399.699,154.95l-13.398,13.4c59.299,34.4,88,80.3,88,80.3S401.6,363.45,248.6,363.45
c-19.1,0-36.3-1.899-53.5-3.8l-15.3,15.3c21,5.7,44,7.601,68.9,7.601c172.101,0,248.601-133.9,248.601-133.9
S466.6,195.15,399.699,154.95z M401.4,76.95L76.9,401.45l18.9,18.9l324.6-324.6L401.4,76.95z M288.801,288.851
c-11.5,11.5-24.9,17.2-40.201,17.2l-17.2,17.199c5.7,1.9,11.5,1.9,17.2,1.9c42.099,0,76.5-34.4,76.5-76.5c0-5.7,0-11.5-1.9-17.2
L306,248.65C306,263.95,300.199,277.351,288.801,288.851z"/>
</g>
</svg>
<svg class="show" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 497.25 497.25" style="enable-background:new 0 0 497.25 497.25;" xml:space="preserve">
<g>
<g>
<circle cx="248.625" cy="248.625" r="19.125"/>
<path d="M248.625,172.125c-42.075,0-76.5,34.425-76.5,76.5s34.425,76.5,76.5,76.5s76.5-34.425,76.5-76.5
S290.7,172.125,248.625,172.125z M248.625,306c-32.513,0-57.375-24.862-57.375-57.375s24.862-57.375,57.375-57.375
S306,216.112,306,248.625S281.138,306,248.625,306z"/>
<path d="M248.625,114.75C76.5,114.75,0,248.625,0,248.625S76.5,382.5,248.625,382.5S497.25,248.625,497.25,248.625
S420.75,114.75,248.625,114.75z M248.625,363.375c-153,0-225.675-114.75-225.675-114.75s72.675-114.75,225.675-114.75
S474.3,248.625,474.3,248.625S401.625,363.375,248.625,363.375z"/>
</g>
</g>
</svg>
</a>
</div>
</form>
</section>
</body>
</html>Result Screenshot(s)
