I've successfully floated labels above form input fields when focused, but I'm stumped on how to keep the labels floating if text is entered into the field and un-focused.
There are tons of pure CSS examples online but none are clear to me what is keeping a filled field label floating. I'm sure it fairly easy but I'm fairly new to this.
EDIT: I need to do this without using the "required" method mentioned in the comments below. My form is a combination of required and non-required fields.
Here is one of many examples I've found:
http://codepen.io/atunnecliffe/pen/gpKzQw
Here is my jsfiddle:
https://jsfiddle.net/yzzxrsnn/1/
Many thanks in advance.
HTML:
CSS:
.form-input {
box-sizing: border-box;
width: 100%;
max-width: 400px;
height: 55px;
margin: 15px 0 15px 0;
padding: 0px 10px 0px 10px;
border: 3px solid #ccc;
outline: none;
border-radius: 8px;
outline: none;
resize: none;
text-align:left;
-webkit-appearance: none;
background: transparent;
font-family: 'Yanone Kaffeesatz', Arial, sans-serif;
color: #000;
background:#fff;
font-size: 18px;
-webkit-transition: border-color ease-in-out .5s,box-shadow ease-in-out .5s;
transition: border-color ease-in-out .5s,box-shadow ease-in-out .5s;
}
.form-input:focus {
border-color: #00bafa;
}
.form-input + .form-label {
display: block;
pointer-events: none;
margin: 0 0 0 15px;
line-height: 0px;
margin-top: -43px;
margin-bottom: 43px;
transition: transform 1s;
}
.form-label {
font-family: 'Yanone Kaffeesatz', Arial, sans-serif;
color: #ccc;
font-size: 18px;
}
.form-input:focus + .form-label {
transform: translateY(-38px);
font-family: 'Yanone Kaffeesatz', Arial, sans-serif;
color: #00bafa;
font-size: 18px;
}
.form-textarea {
box-sizing: border-box;
width: 100%;
max-width: 400px;
height: 150px;
margin: 15px 0 15px 0;
padding: 15px 10px 0px 10px;
border: 3px solid #ccc;
border-radius: 8px;
outline: none;
resize: none;
text-align:left;
-webkit-appearance: none;
background: transparent;
font-family: 'Yanone Kaffeesatz', Arial, sans-serif;
color: #000;
background:#fff;
font-size: 18px;
-webkit-transition: border-color ease-in-out .5s,box-shadow ease-in-out .5s;
transition: border-color ease-in-out .5s,box-shadow ease-in-out .5s;
}
.form-textarea:focus {
border-color: #00bafa;
}
.form-textarea + .form-label {
display: block;
pointer-events: none;
margin: 0 0 0 15px;
line-height: 0px;
margin-top: -145px;
margin-bottom: 145px;
transition: transform 1s;
}
.form-textarea:focus + .form-label {
transform: translateY(-30px);
font-family: 'Yanone Kaffeesatz', Arial, sans-serif;
color: #00bafa;
font-size: 18px;
}
.form-textarea + .form-label:before {
transform: translateY(-38px);
pointer-events: none;
font-family: 'Yanone Kaffeesatz', Arial, sans-serif;
color: #00bafa;
font-size: 18px;
}
JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)
