株式会社レクタス
ホームページアクセスログ解析
追跡・トラッキング機能
ページ閲覧解析システム
アンケートフォーム
認証付きダウンロード機能
会員制不要なオンライン展示会
メール配信システム
営業支援システム
ホームページ制作勉強会
ホームページ制作＆コンサル
商品企画コンサルティング
営業コンサルティング
ホームページメンテナンス【CSS】目のマークでパスワードの表示を切り替える実装方法
目のマークでパスワードの表示非表示を切り替える
目のアイコンをクリックすることでパスワードの表示非表示の切り替える方法を今回は CSS で実装しました。 javascript での実装は【JavaScript】目のマークでパスワードの表示を切り替える実装方法をご参照ください。
https://www.rectus.co.jp/archives/2940以下に実際に動かせるサンプルを用意したので、目のマークを押してみてください。パスワードが表示される・伏字になる状態が確認できます。
サンプルコード
解説は後述します。
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;
}
以上で解説を終わります。目のマークを使わずに、表示非表示ボタン使ったパスワード切り換えの実装方法等も解説しているページがありますので、用途に応じて使い分けていただければと思います。
