パスワードの表示・非表示を切り替えるテキストフィールドを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>パスワードの表示・非表示を切り替えるテキストフィールド</title>

  <!-- CSSファイル -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- パスワード入力フォーム全体 -->
  <div class="password-visibility-toggle-form_wrap">

    <!-- タイトル -->
    <div class="password-visibility-toggle-form_title">
      ログインフォーム
    </div>

    <!-- 説明文 -->
    <p class="password-visibility-toggle-form_text">
      チェックを入れるとパスワードを表示します。
    </p>

    <!-- 入力項目 -->
    <div class="password-visibility-toggle-form_field">

      <!-- パスワード入力欄のラベル -->
      <label
        class="password-visibility-toggle-form_label"
        for="password">
        パスワード
      </label>

      <!-- パスワード入力用テキストフィールド -->
      <input
        class="password-visibility-toggle-form_input"
        type="password"
        id="password"
        name="password"
        placeholder="パスワードを入力">

      <!-- パスワード表示・非表示切り替え -->
      <label class="password-visibility-toggle-form_check">
        <input
          class="password-visibility-toggle-form_checkbox"
          type="checkbox">
        パスワードを表示する
      </label>

    </div>

  </div>

  <!-- JavaScriptファイル -->
  <script src="script.js"></script>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20px。値を大きくすると画面端との間隔が広がる */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体で使用するフォント */
}

/* パスワード入力フォーム全体 */
.password-visibility-toggle-form_wrap{
  width:100%; /* 画面幅に合わせて横幅を縮小 */
  max-width:520px; /* 最大横幅。値を大きくするとフォーム全体が横に広がる */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  padding:32px; /* 内側の余白。値を大きくすると内容と枠線の間隔が広がる */
  border:1px solid #e5e7eb; /* フォーム全体を囲む枠線 */
  border-radius:18px; /* フォーム全体の角丸。値を大きくすると丸みが強くなる */
  background:#f8fafc; /* フォーム全体の背景色 */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* フォーム内のサイズ計算 */
.password-visibility-toggle-form_wrap *{
  box-sizing:border-box; /* paddingとborderを要素のサイズへ含める */
}

/* タイトル */
.password-visibility-toggle-form_title{
  margin:0 0 12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
  font-size:22px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* タイトルを太字にする */
  text-align:center; /* タイトルを中央揃えにする */
}

/* 説明文 */
.password-visibility-toggle-form_text{
  margin:0 0 24px; /* 下側24pxの余白。値を大きくすると入力欄との間隔が広がる */
  color:#4b5563; /* 説明文の文字色 */
  text-align:center; /* 説明文を中央揃えにする */
  line-height:1.8; /* 説明文の行間。値を大きくすると行間が広がる */
}

/* 入力項目 */
.password-visibility-toggle-form_field{
  display:flex; /* 入力項目をFlexboxで配置 */
  flex-direction:column; /* 入力項目を縦方向へ配置 */
  gap:8px; /* ラベルと入力欄の間隔。値を大きくすると間隔が広がる */
}

/* パスワード入力欄のラベル */
.password-visibility-toggle-form_label{
  font-weight:700; /* ラベルを太字にする */
  color:#111827; /* ラベルの文字色 */
}

/* パスワード入力用テキストフィールド */
.password-visibility-toggle-form_input{
  width:100%; /* 親要素の横幅いっぱいに表示 */
  padding:14px 16px; /* 上下14px・左右16px。値を大きくすると入力欄の内側余白が広がる */
  border:1px solid #d1d5db; /* 通常時の枠線 */
  border-radius:10px; /* 入力欄の角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* 入力欄の背景色 */
  font-size:16px; /* 入力文字のサイズ。値を大きくすると文字が大きくなる */
  color:#111827; /* 入力文字の色 */
  outline:none; /* ブラウザ標準の外枠を非表示 */
}

/* フォーカス時 */
.password-visibility-toggle-form_input:focus{
  border-color:#2563eb; /* フォーカス時の枠線色 */
  box-shadow:0 0 0 3px rgba(37,99,235,.15); /* 外側の強調範囲。3pxを変更すると影の広がりが変わる */
}

/* 表示切り替え用チェックボックス */
.password-visibility-toggle-form_check{
  display:flex; /* チェックボックスと文字を横並びにする */
  align-items:center; /* チェックボックスと文字を上下中央に揃える */
  gap:8px; /* チェックボックスと文字の間隔。値を大きくすると間隔が広がる */
  margin-top:10px; /* 上側10pxの余白。値を大きくすると入力欄との間隔が広がる */
  color:#4b5563; /* 文字色 */
  font-weight:700; /* 文字を太字にする */
  cursor:pointer; /* マウスを重ねたときにポインターを表示 */
}

/* チェックボックス */
.password-visibility-toggle-form_checkbox{
  width:18px; /* チェックボックスの横幅。値を大きくすると大きくなる */
  height:18px; /* チェックボックスの高さ。値を大きくすると大きくなる */
  accent-color:#2563eb; /* チェック時の色 */
}

/* 画面幅640px以下 */
@media (max-width:640px){

  /* パスワード入力フォーム全体 */
  .password-visibility-toggle-form_wrap{
    padding:24px 18px; /* スマートフォンでは内側余白を小さくする */
  }

}

/* パスワード入力欄を取得 */
const passwordVisibilityToggleFormInput=document.querySelector("#password");

/* 表示切り替え用チェックボックスを取得 */
const passwordVisibilityToggleFormCheckbox=document.querySelector(".password-visibility-toggle-form_checkbox");

/* チェック状態が変更されたときに実行 */
passwordVisibilityToggleFormCheckbox.addEventListener("change",function(){

  /* チェックされている場合 */
  if(passwordVisibilityToggleFormCheckbox.checked){

    /* 入力内容を文字として表示 */
    passwordVisibilityToggleFormInput.type="text";
    return;

  }

  /* チェックされていない場合はパスワードを伏せ字に戻す */
  passwordVisibilityToggleFormInput.type="password";

});