Login Input

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

<div class="field">
  <input type="text">
  <div class="icon">
    <i class="fa fa-user"></i>
  </div>
</div>

CSS

.field input {
	outline: none;
	border: 0px solid #fff;
	font-size: 14px;
	padding: 5px 5px 5px 44px;
	position: absolute;

	width: 260px;
	height: 40px;
	
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 5px;
	box-shadow: 0px 0px 0px 0px rgba(186,213,232,1);
  
	transition: border 0.5s ease-in-out 0s, box-shadow 0.3s ease-in-out 0s;
}

.field input:focus {
	border: 1px solid #2977FF;
	box-shadow: 0px 0px 10px 2px rgba(186,213,232,1);
}

.field .icon {
  display: flex;
	justify-content: center;
	align-items: center;

  
	height: 36px;
	width: 36px;
	padding: 0;
	border: 1px solid #eee;
	border-radius: 3px;
	margin: 1px 0px 0px 1px;
	position: absolute;
	background-color: #eee;
}