Edit in JSFiddle

<div class="textbox">
	<input type="text" id="name" placeholder="&nbsp;"/>
	<label for="name">Name</label>
</div>

<div class="textbox">
	<input type="email" id="email" placeholder="&nbsp;"/>
	<label for="email">Email</label>
</div>

<div class="textbox">
	<input type="tel" id="phone" placeholder="&nbsp;"/>
	<label for="phone">PhoneNumber</label>
</div>

.textbox {
	position: relative;
	width: 250px;
	margin: 30px auto;
}
label {
	position: absolute;
	top: 0px;
	margin: 3px;
	padding: 0 5px;
	background-color: #fff;
	color: #a9a9a9;
	font-size: 1.4rem;
	cursor: text;
	transition: all ease-in-out 0.2s;
}
input {
	display: block;
	width: 250px;
	padding: 5px;
	border: solid 1px #00a5a0;
	font-size: 1.4rem;
	&:focus,
	&:not(:placeholder-shown){
		outline: none;
		+ label {
			top: -15px;
			margin: 0 3px;
			font-size: 1rem;
			color: #00a5a0;
		}
	}
}