【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

ご質問等ありましたら,下のフォームからお願いします.

 
   
contact
Pagetop