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>


<div class="frm_lab"><input type="text" id="name" onchange="this.setAttribute('value', this.value);" placeholder="Név" value=""><label for="name"></label></div>
<div class="frm_lab"><input type="text" id="tel" onchange="this.setAttribute('value', this.value);" placeholder="Telefon" value=""><label for="tel"></label></div>
<div class="frm_lab"><input type="text" id="mail" onchange="this.setAttribute('value', this.value);" placeholder="E-mail" value=""><label for="mail"></label></div>

<div class="frm_lab"><textarea id="mess" placeholder="Üzenet"></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;}
form input[type="text"]{
  width: 200px;
  padding:5px;
  outline:none;
  border-radius:4px;
  border:1px solid gray;
  box-sizing: border-box;
  transition:all 0.5s ease;
}
form input[type="text"]:focus{
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
}
form input[type="text"] + label::before {
 content: "";
 top:3px;
 left:3px;
 width:24px;
 height:24px;
 position:absolute;
 display:inline-block;
 vertical-align: middle;
 transition:all 1s ease;
}
form input#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 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z"/></svg>');
}
form input#mail + label::before {
 background-image: url('data:image/svg+xml;utf8,<svg...