v24 form B2B registrace

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 id="v24-b2b-registraton">
<form class="v24-form-layout2">

<!-- <input type="checkbox" id="companyRegBlockSwitch" role="companyRegBlockSwitch" /> -->
<section tab="firma">

	<div class="v24-input-row-heading">
		<h3>Údaje o firmě</h3>
		<span class="info"><figure class="red">!</figure>Vyplňte údaje shodné s Obchdním rejstříkem, údaje budou na vašich dokladech.</span>
	</div><!-- /.v24-input-row-heading -->

	<div class="v24-input-row">

		<div class="v24-input-wrap">
			<input class="v24-input" type="text" placeholder=" " required autocomplete="organization-id" id="ComRegId" n:name="ComRegId">
			<label class="v24-input-label">IČ firmy</label>
		</div><!-- /.v24-text-input-wrap -->

		<div class="v24-input-wrap">
			<input class="v24-input" type="text" placeholder=" " autocomplete="organization-tax" id="ComTaxNum" n:name="ComTaxNum">
			<label class="v24-input-label">DIČ</label>
		</div><!-- /.v24-text-input-wrap -->

	</div><!-- /.v24-input-row -->

	<div class="v24-input-row">

		<div class="v24-checkbox-wrap">
			<input class="v24-checkbox" type="checkbox" id="frm-registration-ComTax">
			<label class="v24-input-label" for="frm-registration-ComTax">Jsme plátcem DPH</label>
		</div><!-- /.v24-text-input-wrap -->

	</div><!-- /.v24-input-row -->

	<div class="v24-input-row">

		<div class="v24-input-wrap">
			<input class="v24-input" type="text" placeholder=" " required autocomplete="organization" n:name="ComName">
			<label class="v24-input-label">Název firmy</label>
		</div><!-- /.v24-text-input-wrap -->

		<div class="v24-input-wrap">
			<input class="v24-input" type="text" placeholder=" " autocomplete="url" n:name="ComWWW">
			<label class="v24-input-label">Firemní www</label>
		</div><!-- /.v24-text-input-wrap -->

	</div><!-- /.v24-input-row -->
	
</section>

<section...

CSS

html, body { height: 100%;  padding: 10px;  margin: 0;	box-sizing:border-box; }


/***** REG.FORM v24 
       barva svg ickon: #708991 
			 input pro password musí držet HTML elementy viz šablona https://jsfiddle.net/PetrHaluza/8kdcf4rj ******/
			 
			 /* základ */
.v24-input-wrap { min-width: 220px; 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} /* input password */
.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...

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");
    }
    
  });
  
});