パスワードの表示/非表示を切り替え

Demo

パスワード

HTML&CSS

HTMLindex.htmldownload

<div class="ip_pw1">

	<p>パスワード</p>

	<input type="password" name="password" id="password">

	<table>

		<tr>

			<td><input type="checkbox" id="password_eye"></td>

			<td><label for="password_eye">パスワードを表示する</label></td>
		</tr>
	</table>
</div>

<script>

	const password = document.getElementById('password');

	const passwordEye = document.getElementById('password_eye');

	passwordEye.addEventListener('change', function(){

		if(passwordEye.checked){

			password.setAttribute('type', 'text');

		}else{

			password.setAttribute('type', 'password');
		}
	}, false);
</script>

CSSstyle.cssdownload

.ip_pw1{
	width: 80%;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	padding: 2rem;
	border: 1px solid #ccc;
}
.ip_pw1 input{
	width: 100%;
	height: 2rem;
	outline: none;
	border: 1px solid #ccc;
}
.ip_pw1 table{
	width: 100%;
	margin-top: 1rem;
}
.ip_pw1 table input{
	height: 1rem;
	margin-bottom: initial;
}
.ip_pw1 table label{
	font-size: 0.7rem;
	padding-left: 0.5rem;
}
© 2025 wayday