B2B reg form

by Petr Haluza

HTML

<link rel="stylesheet" href="https://www.asm.cz/css/theme-asm.css?v=./../www/css/theme-asm.css">

<!-- ikonz https://www.svgrepo.com/collection/dazzle-line-icons/ -->
<section>
<form>

<div class="v24-input-wrap">
  <span class="v24-pass-icon"></span>
	<span class="v24-eye-icon"></span>
  <input class="v24-input" type="password" placeholder=" " required>
  <label class="v24-input-label">Heslo</label>
</div><!-- /.v24-text-input-wrap -->


<div class="v24-input-wrap">
  <input class="v24-input" type="text" placeholder=" " required autocomplete="given-name">
  <label class="v24-input-label">Jméno</label>
</div><!-- /.v24-text-input-wrap -->

<div class="v24-input-wrap">
  <input class="v24-input" type="text" placeholder=" " required autocomplete="family-name">
  <label class="v24-input-label">Příjmení</label>
</div><!-- /.v24-text-input-wrap -->

<div class="v24-input-wrap">
  <input class="v24-input" type="email" placeholder=" " required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" autocomplete="off">
  <label class="v24-input-label">E-mail</label>
</div><!-- /.v24-text-input-wrap -->

<div class="v24-input-wrap">
  <input class="v24-input" type="text" placeholder=" " required autocomplete="phone-number" inputmode="numeric" maxlength="16">
  <label class="v24-input-label">Tel.</label>
</div><!-- /.v24-text-input-wrap -->



<input type="submit">
</form>

</section>

<span style="padding: 2em; color: red">Nezapomen SETasBASEM</span>

CSS

html, body {
  height: 100%;
  padding: 10px;
  margin: 0;
	box-sizing:border-box; width: 300px
	
}
form { display: flex; flex-direction:column; gap:15px; width: min-content}


/* barva svg ickon: #708991 */
.v24-input-wrap { min-width: 180px; height: 45px; border: 1px solid lightblue; border-radius: 8px; background: white; position: relative; overflow:hidden}

.v24-input-wrap:has(.v24-pass-icon)::before { content: ''; position: absolute; display: block; top: 50%; right: 10px;  transform: translateY(-50%); width: 30px; height: 30px; background-color: lightblue; border-radius: 50%; transition: all .5s; z-index: 1}
.v24-input-wrap.readable::before { width: 120%; height: 120%; right: -10px; border-radius:0}

.v24-input-wrap input { 
	position: absolute; padding: 0 5px 0 18px; width: 100%; line-height: 50px; font-size: 14px; color: #405961; border: none; background-color: transparent; outline: none;  z-index: 9}
.v24-input-wrap:has(.v24-pass-icon) input {padding: 0 50px 0 45px;}



.v24-input-wrap .v24-input-label { cursor: text; display: flex; position: absolute; z-index: 10; top: 50%; transform: translateY(-50%); left: 1em; transform-origin: 0 0; transition: color .25s, transform .25s; padding:0}
.v24-input-wrap:has(.v24-pass-icon) .v24-input-label { left: calc(1em + 30px)}


.v24-input-wrap .v24-input:focus-visible + .v24-input-label, 
.v24-input-wrap .v24-input:not(:placeholder-shown) + .v24-input-label{ transform: translateY(-100%) scale(0.75); opacity:.75}
.v24-input-wrap .v24-input + .login__label { pointer-events: none;}

.v24-input-wrap .v24-pass-icon {
  position: absolute; z-index: 9; top: 50%; transform: translateY(-50%); transition: all .5s; left: 15px; width: 20px; height: 20px;
  background-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 16C2 13.1716 2 11.7574 2.87868 10.8787C3.75736 10 5.17157 10 8 10H16C18.8284 10 20.2426 10 21.1213 10.8787C22 11.7574 22 13.1716 22 16C22 18.8284 22...

JavaScript

$(function(){
  
  $("body").on("click", ".v24-eye-icon", function(){
    
    var eye = $(this).parent();
		var pas = $(this).nextAll("input");
    
    if(eye.hasClass("readable")){
      eye.removeClass("readable");
      pas.attr("type","password");
    }else {
      eye.addClass("readable");
      pas.attr("type","text");
    }
    
  });
  
});