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