CSSで目のマークを作成する

パスワード表示非表示用、CSSのみで目のマークを作成する

画像の目のマークと比べるとかなりシンプルになりますが、できる限り簡単に CSS のみで実装できる目のマークを作成しました。パスワードの表示、非表示のために用いられることが多いと思いますので、すでに input タグに設置したものを用意しています。サンプルは JavaScript を使用して切り替えを行っていますが、サンプルコードには目のマーク作成に関わる部分のみ載せています。パスワードを表示・非表示にする機能は【CSS】目のマークでパスワードの表示を切り替える実装方法、【JavaScript】目のマークでパスワードの表示を切り替える実装方法をご参照ください。

サンプルコード

HTML

<div class="togglePassword">
  <input type="password">
  <span class="eye">
    <span class="iris"></span>
    <span class="light"></span>
  </span>
  <span class="slash" style="display:none;"></span>
</div>

CSS

.togglePassword {
  position: relative;
  display: inline-block;
}
/* 目の輪郭 */
.eye {
  position: absolute;
  width: 19px;
  height: 19px;
  border-radius: 90% 0 90% 0;
  transform: rotate(45deg);
  top: 50%;
  right: 5%;
  border: solid 0.1rem;
  margin-top: -11px;
  background: white;
}
/* 黒目 */
.iris {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  top: 50%;
  margin-top: -7px;
  right: 18%;
  background: black;
}
/* 黒目に入る光 */
.light {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  margin-top: 4px;
  right: 40%;
  background: white;
}
/* スラッシュ */
.slash {
  position: absolute;
  height: 30px;
  width: 1px;
  transform: rotate(65deg);
  top: 50%;
  margin-top: -15px;
  right: 11%;
  background-color: black;
}

解説

目の輪郭、黒目、黒目に入る光、非表示にする際のスラッシュマークをパーツに分けて用意しました。一番のポイントは、border-radius で(正方形の)左上、右下の角を丸めて目の輪郭を作成している部分です。そのほかは正円と直線のみ使用しているのでシンプルな構成になっています。

以上、CSSのみで目のマークを作成する方法をご紹介しました。今回の実装方法であれば、画像やフォントを利用する場合よりも複雑にはなりますが、画像やフォントを読み込む必要がないので処理も重くならずに済みます。また、画像のリンク切れやフォントを読み込めないといった環境にも左右されませんし、細かなデザインの変更や修正に柔軟に対応できるメリットがあります。