Show/Hide Password in HTML Form

Most of the work is done by the CSS but a little JavaScript is needed to complete this function. Convert images to base 64 strings.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Show/Hide Textbox Password</title>
	<style>
	body {
		background-color: #ccc;
	}
	main {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.hidepwd {
		padding: 0 30px 0 0;
		margin: 0;
		cursor: pointer;
		width: 150px;
		line-height: 30px;
		height: 30px;
		border: 2px solid darkcyan;
		outline: none;
		box-sizing: border-box; /* optional */
	}
	/*
	CONVERT IMAGES TO BASE 64 STRINGS:
		http://www.prowaretech.com/Computer/Html/ConvertImageToBase64
	*/
	.hidepwd[type="password"] { /* Remember, SVG's scale to any size without pixelation */
		background: white url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjU2MXB4IiBoZWlnaHQ9IjU2MXB4IiB2aWV3Qm94PSIwIDAgNTYxIDU2MSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTYxIDU2MTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGcgaWQ9InZpc2liaWxpdHkiPg0KCQk8cGF0aCBkPSJNMjgwLjUsODkuMjVDMTUzLDg5LjI1LDQzLjM1LDE2OC4zLDAsMjgwLjVjNDMuMzUsMTEyLjIsMTUzLDE5MS4yNSwyODAuNSwxOTEuMjVTNTE3LjY1LDM5Mi43LDU2MSwyODAuNQ0KCQkJQzUxNy42NSwxNjguMyw0MDgsODkuMjUsMjgwLjUsODkuMjV6IE0yODAuNSw0MDhDMjA5LjEsNDA4LDE1MywzNTEuOSwxNTMsMjgwLjVjMC03MS40LDU2LjEtMTI3LjUsMTI3LjUtMTI3LjUNCgkJCWM3MS40LDAsMTI3LjUsNTYuMSwxMjcuNSwxMjcuNUM0MDgsMzUxLjksMzUxLjksNDA4LDI4MC41LDQwOHogTTI4MC41LDIwNGMtNDMuMzUsMC03Ni41LDMzLjE1LTc2LjUsNzYuNQ0KCQkJYzAsNDMuMzUsMzMuMTUsNzYuNSw3Ni41LDc2LjVjNDMuMzUsMCw3Ni41LTMzLjE1LDc2LjUtNzYuNUMzNTcsMjM3LjE1LDMyMy44NSwyMDQsMjgwLjUsMjA0eiIvPg0KCTwvZz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjwvc3ZnPg0K) no-repeat;
		background-size: 25px 25px;
		background-position: 100% 50%;
	}
	.hidepwd[type="text"] {
		background: white url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNDY5LjQ0IDQ2OS40NCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDY5LjQ0IDQ2OS40NDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTIzMS4xNDcsMTYwLjM3M2w2Ny4yLDY3LjJsMC4zMi0zLjUyYzAtMzUuMzA3LTI4LjY5My02NC02NC02NEwyMzEuMTQ3LDE2MC4zNzN6Ii8+DQoJCQk8cGF0aCBkPSJNMjM0LjY2NywxMTcuMzg3YzU4Ljg4LDAsMTA2LjY2Nyw0Ny43ODcsMTA2LjY2NywxMDYuNjY3YzAsMTMuNzYtMi43NzMsMjYuODgtNy41NzMsMzguOTMzbDYyLjQsNjIuNA0KCQkJCWMzMi4yMTMtMjYuODgsNTcuNi02MS42NTMsNzMuMjgtMTAxLjMzM2MtMzcuMDEzLTkzLjY1My0xMjgtMTYwLTIzNC43NzMtMTYwYy0yOS44NjcsMC01OC40NTMsNS4zMzMtODUuMDEzLDE0LjkzM2w0Ni4wOCw0NS45NzMNCgkJCQlDMjA3Ljc4NywxMjAuMjY3LDIyMC45MDcsMTE3LjM4NywyMzQuNjY3LDExNy4zODd6Ii8+DQoJCQk8cGF0aCBkPSJNMjEuMzMzLDU5LjI1M2w0OC42NCw0OC42NGw5LjcwNyw5LjcwN0M0NC40OCwxNDUuMTIsMTYuNjQsMTgxLjcwNywwLDIyNC4wNTNjMzYuOTA3LDkzLjY1MywxMjgsMTYwLDIzNC42NjcsMTYwDQoJCQkJYzMzLjA2NywwLDY0LjY0LTYuNCw5My41NDctMTguMDI3bDkuMDY3LDkuMDY3bDYyLjE4Nyw2Mi4yOTNsMjcuMi0yNy4wOTNMNDguNTMzLDMyLjA1M0wyMS4zMzMsNTkuMjUzeiBNMTM5LjMwNywxNzcuMTINCgkJCQlsMzIuOTYsMzIuOTZjLTAuOTYsNC41ODctMS42LDkuMTczLTEuNiwxMy45NzNjMCwzNS4zMDcsMjguNjkzLDY0LDY0LDY0YzQuOCwwLDkuMzg3LTAuNjQsMTMuODY3LTEuNmwzMi45NiwzMi45Ng0KCQkJCWMtMTQuMTg3LDcuMDQtMjkuOTczLDExLjMwNy00Ni44MjcsMTEuMzA3QzE3NS43ODcsMzMwLjcyLDEyOCwyODIuOTMzLDEyOCwyMjQuMDUzQzEyOCwyMDcuMiwxMzIuMjY3LDE5MS40MTMsMTM5LjMwNywxNzcuMTJ6Ig0KCQkJCS8+DQoJCTwvZz4NCgk8L2c+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8L3N2Zz4NCg==) no-repeat;
		background-size: 25px 25px;
		background-position: 100% 50%;
	}
	</style>
	<script type="text/javascript">
	function passwordShowHide() {
		if(event.offsetX > event.target.offsetWidth - 30) { /* 30: this constant will vary with each implementation (see padding) */
			if(event.target.type == "password") {
				event.target.type = "text";
			}
			else {
				event.target.type = "password";
			}
		}
	}
	</script>
</head>
<body>
	<main>
		<input class="hidepwd" type="password" name="password" autocomplete="off" onclick="passwordShowHide();" required />
	</main>
</body>
</html>

Coding Video

https://youtu.be/d1oF5qHl61U