CSS valid sorunu

Bilen bilir bu cicili bicili formlar yapılrı hep, siz form un input text i ni seçtiğinizde yukarı doğru label kayar ve belli bir yerde durur, sonra input text e yazı yazdığınızda o yazı orada kalır yada silinir.. İşte benim yaptığım da yukarıda kalamıyor, bir şekilde text in required ı olduğunda kalanları internette mevcut ancak illede veri girilmemesi gereken yerler de var formda..

sorun CSS tarafında şurada ancak çözemedim bir türlü.

.form-input:valid + .form-label {
color:#ff6600;
font-size: 10px;
/*
-moz-transform: translateY(-50px);
-ms-transform: translateY(-50px);
-webkit-transform: translateY(-50px);
transform: translateY(-50px);
*/
}


HTML..

Firma Adı

CSS..

.form-label{ display: block;}
.form-field {
border: 0;

}

.form-input {
position: absolute;
}

.form-input + .form-label {
position: relative;
transition: transform 1s;
display: inline-block;
}

.form-input:focus + .form-label {

-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-webkit-transform: translateY(-40px);
transform: translateY(-40px);
}

/* SORUN BURADA */
.form-input:valid + .form-label {
color:#ff6600;
font-size: 10px;
/*
-moz-transform: translateY(-50px);
-ms-transform: translateY(-50px);
-webkit-transform: translateY(-50px);
transform: translateY(-50px);
*/
}

.form-input {
background-color: transparent;
border: 0;
border-bottom: 1px solid #CCC;
color: #000;
font-size: 14px;
/*letter-spacing: 1px;*/
outline: 0;
padding: 5px 10px 0px 2px;
/* text-align: center;*/
transition: all 0.3s;
width: 90%;
}
.form-input:focus {
border-bottom: 1px solid #26B99A;
width: 100%;
}


Sıfırdan yazmaya karar verdim :) bu sefer istediğim gibi oldu CSS nelere kadirsin..

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..



Your email address



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