ANLEITUNG: Button Passwort sichtbar machen

[noRiddle (revilonetz)]

Hier mal noch 'ne Variante ohne FontAwesome nur mit CSS:

/templates/YOUR_TEMPLATE/javascript/extra/show_pass.js.php

Code: PHP  [Auswählen]

<?php
//BOC "show pass" implementation, 02-2022, noRiddle
?>
<script>
$(function() {
  if($('input[type="password"]').length) {
    let $ipw = $('input[type="password"]'),
        sh_pw = ' <span class="shw-pw eye"></span>';
    $ipw.each(function() {
      let th = $(this).outerHeight(),
          icfs = 22,
          nth = th/2 - icfs/2;
      $(this).wrap('<div class="pssw-wrap" style="position:relative;"></div>');
      $(sh_pw).insertAfter($(this)).css({'position':'absolute', 'top':nth, 'right':'5px', 'font-size':icfs+'px', 'color':'#555', 'cursor':'pointer'});
    });
    $('.shw-pw').on('click', function() {
      let $tpi = $(this).prev('input');

      $(this).toggleClass("eye eye-slash");

      if($tpi.attr('type') == 'password') {
        $tpi.prop('type', 'text');
      } else if($tpi.attr('type') == 'text') {
        $tpi.prop('type', 'password');
      }
    });
  }
});
</script>
<?php
//EOC "show pass" implementation, 02-2022, noRiddle
?>

CSS:

Code: CSS  [Auswählen]

/*BOC for "show pass" function, 02-2022, noRiddle*/
.eye, .eye-slash {
  width:20px;
  height:20px;
  border:1px solid #000;
  border-radius:75% 15%;
  transform:rotate(45deg);
}
.eye:before, .eye-slash:before {
  content:'';
  position: absolute;
  width: 6px;
  height: 6px;
  border: solid 1px #000;
  border-radius: 50%;
  left: 6px;
  top: 6px;
}
.eye-slash:after {
  content:'';
  width:0;
  height:28px;
  position:absolute;
  left:50%;
  top:-5px;
  color:#000;
  border:1px solid #000;
}
/*EOC for "show pass" function, 02-2022, noRiddle*/
/*CSS inspiration from https://codepen.io/wentin/pen/mezPVw*/

Wer das Auge etwas konturierter möchte (spitzere Augenwinkel)  gibt bei

Code: CSS  [Auswählen]

border-radius:75% 15%;

statt dessen z. B. das an

Code: CSS  [Auswählen]

border-radius:75% 10%;

Experimentiert selbst.

Gruß,
noRiddle