【CSS】目のマークでパスワードの表示を切り替える実装方法

最終更新日: 公開日: 2021年06月

目のマークでパスワードの表示非表示を切り替える

パスワード

目のアイコンをクリックすることでパスワードの表示非表示の切り替える方法を今回は CSS で実装しました。 javascript での実装【JavaScript】目のマークでパスワードの表示を切り替える実装方法をご参照ください。

以下に実際に動かせるサンプルを用意したので、目のマークを押してみてください。パスワードが表示される・伏字になる状態が確認できます。

サンプルコード

解説は後述します。

HTML

<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./togglePassword.css">
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
  </head>

  <body>
    <input type="checkbox" id="checkPassword">
    <div class="togglePassword">
      <input type="password" class="hideText" value="password123">
      <input type="text" class="showText" value="password123">
      <label for="checkPassword" class="fa fa-eye"></label>
      <label for="checkPassword" class="fa fa-eye-slash"></label>
    </div>
  </body>
</html>

CSS

#checkPassword {
  display: none;
}
.hideText, .showText {
  border: none;
  outline: none;
}
.togglePassword {
  border: 1px solid;
  border-radius: 2px;
  width: 205px;
}
.showText {
  display: none;
}
.hideText {
  display: inline;
}
.fa-eye:before {
  display: inline;
  margin-left: 5px; 
}
.fa-eye-slash:before {
  display: none;
}
#checkPassword:checked + .togglePassword > .fa-eye:before {
  display: none;
}
#checkPassword:checked + .togglePassword > .fa-eye-slash:before {
  display: inline-block;
}
#checkPassword:checked + .togglePassword > .hideText {
  display: none;
}
#checkPassword:checked + .togglePassword > .showText {
  display: inline-block;
}

解説

HTML:パスワード入力欄の作成に必要なパーツを用意

今回はfont awesome 5 の fa-eye アイコンと fa-eye-slash アイコンを使用します。head タグの中で記載していますが、CDN 経由でアイコンを利用可能にしています。

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

また、CSS で class の書き換えはできないので、チェックボックスの label を目のマーク( fa-eye アイコン)用とスラッシュの目のマーク( fa-eye-slash アイコン)用の 2 つ用意します。

<label for="checkPassword" class="fa fa-eye"></label>
<label for="checkPassword" class="fa fa-eye-slash"></label>

後に解説がありますが、CSS でデフォルトのinput タグの枠は消し、input タグと目のマークを囲んだ枠を用意するので、label は input タグと同じ class に属するようにしました。

CSS:HTMLで作成したパーツから入力欄を作り、パスワードを表示・非表示にする動きを加える

まず、パスワード入力欄を作成します。

チェックボックスは非表示にします。

#checkPassword {
  display: none;
}

初期状態ではパスワードは黒丸(伏字)、目のマークが表示されています。テキストのパスワードとスラッシュの目のマークは非表示にしておきます。
また、目のマークとスラッシュの目のマークは切り替えたときに微妙にズレてしまう場合があります。ズレが生じないように少しだけ目のマークをずらしておきます。

.showText {
  display: none;
}
.hideText {
  display: inline;
}
.fa-eye:before {
 display: inline;
 margin-left: 5px; /*切り替えたときのズレに対応*/
}
.fa-eye-slash:before {
  display: none;
}

目のマークが入力欄の中にある枠を用意したいので、デフォルトの input タグの枠は消して、input タグと目のマークを囲っている div タグで枠を作り直しています。

/*入力欄のデフォルト枠は隠す*/
.hideText, .showText {
  border: none;
  outline: none;
}
/*新しく入力欄の枠を表示*/
.togglePassword {
  border: 1px solid;
  border-radius: 2px;
  width: 205px;
}

次はパスワードの表示非表示切り換えの仕組みについてです。チェックボックスと labal を利用して、チェックボックスのチェック有無でクリック判定をしています。
チェックされた時に目のマークと伏字パスワードを非表示にして、目のマーク(スラッシュ)とテキストのパスワードを表示します。

目のマークと伏字パスワードの表示、目のマーク(スラッシュ)とパスワードの非表示

/*黒丸表示*/
.hideText {
  display: inline;
}
/*テキストは非表示*/
.showText {
  display: none;
}
/* "目のマーク" を表示*/
.fa-eye:before {
  display: inline;
  margin-left: 5px; 
}
/* "目のマーク(スラッシュ)" は非表示*/
.fa-eye-slash:before {
  display: none;
}

目のマークのクリックでパスワードを表示非表示にする

/*ボタンが押されたとき(チェックボックスにチェックしたとき) "目のマーク" は非表示*/
#checkPassword:checked + .togglePassword > .fa-eye:before {
  display: none;
}
/*ボタンが押されたとき(チェックボックスにチェックしたとき) "目のマーク(スラッシュ)" を表示*/
#checkPassword:checked + .togglePassword > .fa-eye-slash:before {
  display: inline-block;
}
/*ボタンが押されたとき(チェックボックスにチェックしたとき)黒丸を非表示*/
#checkPassword:checked + .togglePassword > .hideText {
  display: none;
}
/*ボタンが押されたとき(チェックボックスにチェックしたとき)テキストを表示*/
#checkPassword:checked + .togglePassword > .showText {
  display: inline-block;
}

以上で解説を終わります。目のマークを使わずに、表示非表示ボタン使ったパスワード切り換えの実装方法等も解説しているページがありますので、用途に応じて使い分けていただければと思います。

 

Contact

ご質問等ありましたら,お手数ですが弊社の個人情報保護方針をお読み頂いた上でフォームからお願い致します.

 
   
Chrome 拡張機能 PageSpeed Insights SEO WordPress Youtube お問い合わせフォーム アナリティクス アンケートフォーム サーチコンソール セミナー タグマネージャー データベース ヒアリング プラグイン ページ閲覧解析 マーケティング メール配信 リッチリザルト レスポンシブ対応 ログ解析 勉強会 商品企画 営業 営業力 営業支援システム 実装 検索順位 検索順位チェックツール 追跡 開発者ツール
contact
Pagetop