Bitmişini de vereyim bari arayan çıkarsa bulmuş olsun.. Tabi Css tarafında renk vb daha düzeltilmesi gereken işler var ama temelde gereken bu kısım.. kalan arayanın ne gibi bir tasarım istediğine göredeğişir.
Label seçilince yukarı kayıyor yazı yazıp ayrılınca label kayboluyor.. İstersen yukarıda kalıyor.
Aradığım bu da değil... required olmadan çalışmıyor.. aşamadım şu required olayını bilen varsa destek lütfen..
CSS ler.
input:not(:focus):valid ~ .floating-label { color:transparent;
font-size:50px;
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
-webkit-transform: translateY(-20px);
transform: translateY(-20px);}
.inputText:focus {
border-bottom: 1px solid #26B99A;
width: 100%;
transition: all 0.3s;
}
.inputText {
position:absolute;
font-size: 14px;
height: 35px;
border:none;
background:transparent;
border-bottom:1px solid #ff6600;
width:90%;
}
.floating-label {
position: absolute;
transition: transform 1s;
display: inline-block;
top:15px;
pointer-events: none;
padding:0px;
margin:0px;
transition: 0.2s ease all;
}