Falling Form Label

Falling Form Label.markdown

Falling Form Label

A Pen by Lucas Mosele on CodePen.

License.

index.html

<div className="row">
    				<div class="col-sm-8 split-form-col">
					 	<div class="col-sm-6">
						   <div class="form-wrapper">
						    <input class="edit-input" id="email" type="email" required pattern=".*\S.*" />
						    <label class="edit-label" for="email">Email</label>
						   </div>
						</div>
						<div class="col-sm-3">
						   <div class="form-wrapper">
						    <input class="edit-input date" id="dob" type="date" required pattern=".*\S.*" />
						    <label class="edit-label" for="dob">Date of Birth</label>
						   </div>
						</div>
						<div class="col-sm-3">
						   <div class="form-wrapper">
						    <select class="edit-input" id="gender" name="gender">
							  <option value="Male">Male</option>
							  <option value="Female">Female</option>
							</select>
						    <label class="edit-label" for="gender">Gender</label>
						   </div>
						</div>
					</div>
    			</div>

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script>

style.scss

.hr-employee-edit-container {
	background-color: #fff;
	position: relative;
	width: 100%;
	border: 1px solid #d3d3d3;
	.wrapper > .row {
		margin-left: 2%;
		max-width: 90%;
		padding-bottom: 20px;
		padding-top: 15px;
	}
}
// This overwrites the padding on bootstrap columns so we can nest them
.split-form-col {
	margin: 0;
    padding: 0;
}

.form-wrapper {
	margin-top: 10px;
	margin-bottom: 30px;
	.edit-label {
		display: block;
	    position: absolute;
	    top: 20px;
	    padding-top: 5px;
	    pointer-events: none;
	    transform: translateX(0%);
	    transition: all .3s ease;
	}
	.edit-input {
	    display: block;
	    height: 40px;
	    width: 100%;
	    border: 0;
	    border-bottom: 1px solid #333;
	    transition: all .3s ease;
	    line-height: 40px;
	    border-radius: 0;
	    -webkit-appearance: none;
	    &:hover {
	    	background: #eee;
	    }
	    &:focus {
	    	border-bottom: 2px solid #5db9d1;
	    	transition: all .3s ease;
	    }
	    &select {
	    	border-radius: 0;
	    }
	    &[type=date] ~ .edit-label,
	    &:valid ~ .edit-label,
	    &:focus ~ .edit-label {
	    	top: 51px;
	    	transition: all .3s ease;
		}
	}
}


		

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />