Elegant form

by Dörnesz Tamás

HTML

<form>
<input type="checkbox" id="ch1"><label for="ch1"></label>
<input type="checkbox" id="ch2" checked><label for="ch2"></label>
<input type="checkbox" id="ch3"><label for="ch3"></label>

<br>
<div class="frm_lab"><input type="text" id="name" pattern=".{4,}" required="required" onchange="this.setAttribute('value', this.value);" placeholder="Név" value=""><label for="name"></label></div>
<div class="frm_lab"><input type="text" id="tel" pattern="[a-z0-9\.\-\+() ]{2,}$" required="required" onchange="this.setAttribute('value', this.value);" placeholder="Telefon" value=""><label for="tel"></label></div>
<div class="frm_lab"><input type="text" id="mail" pattern="[a-z0-9\._\-]+@[a-z0-9\._\-]+\.[a-z]{2,}$" required="required" onchange="this.setAttribute('value', this.value);" placeholder="E-mail" value=""><label for="mail"></label></div>

<br>
<br>
<div class="frm_lab"><textarea id="mess" placeholder="Üzenet" pattern=".{4,}" required="required"></textarea><label for="mess"></label></div>
</form>

CSS

form input[type="checkbox"]{
  display:none;
}
form input[type="checkbox"] + label::before { 
 content: "";
 width:24px;
 height:24px;
 display:inline-block;
 vertical-align: middle;
 background-image: url('data:image/svg+xml;utf8,<svg fill="rgb(128,128,128)" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></svg>');
}
form input[type="checkbox"]:checked + label::before {
 content: "";
 width:24px;
 height:24px;
 display:inline-block;
 vertical-align: middle;
 background-image: url('data:image/svg+xml;utf8,<svg fill="rgb(128,128,128)" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');
}

.frm_lab{position:relative;display:inline-block;}
.frm_lab input, .frm_lab textarea{
  width: 200px;
  padding:5px;
  outline:none;
  border-radius:4px;
  border:1px solid gray;
  box-sizing: border-box;
  transition:all 0.5s ease;
}
.frm_lab input:focus, .frm_lab textarea:focus{
  border-color:black;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
}
.frm_lab * + label::before {
 content: "";
 top:3px;
 left:3px;
 width:24px;
 height:24px;
 position:absolute;
 display:inline-block;
 vertical-align: middle;
 transition:all 1s ease;
}
.frm_lab * + label::after {
 content: "";
 top:2px;
 right:2px;
 width:14px;
 height:14px;
 border-radius:50%;
 overflow:hidden;
 position:absolute;
 display:inline-block;
 vertical-align: middle;
 transition:all 1s ease 1s;
 opacity:0;
}

.frm_lab *#tel + label::before {background-image: url('data:image/svg+xml;utf8,<svg fill="rgb(128,128,128)" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57...