Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
<style id="jsbin-css">
.cont {
  width: 300px;
  margin: 100px auto 0;
  background: #000;
}
.text-edit {
  position: relative;
  height: 50px;
  width: 200px;
}
.text-edit > input {
  width: 100%;
  height: 66%;
  padding: 5px;
  box-sizing: border-box;
  position: absolute;
  border: none;
  border-bottom: 1px solid #888;
  outline: none;
  bottom: 0;
  transition: all .25s;
}
.text-edit > input:focus {
  border-color: #ff5722;
}
.text-edit > input:focus + label {
  top: 3px;
  font-size: 12px;
  color: #ff5722;
}
.text-edit > label {
  position: absolute;
  top: 24px;
  left: 3px;
  color: #888;
  cursor: text;
  transition: all .25s;
}
</style>
</head>
<body>
  <div class="cont">
    <div class="text-edit">
      <input id="text-1" type="text">
      <label for="text-1">Имя</label>
    </div>
    <div class="text-edit">
      <input type="text" id="text-2">
      <label for="text-2">Пароль</label>
    </div>
  </div>


<script id="jsbin-source-css" type="text/css">@blue: #2271d2;
@orange: #ff5722;

.cont {
  width: 300px;
  margin: 100px auto 0;
  background: #000;
}

.text-edit {
  position: relative;
  height: 50px;
  width: 200px;
  > input {
    width: 100%;
    height: 66%;
    padding: 5px;
    box-sizing: border-box;
    position: absolute;
    border: none;
    border-bottom: 1px solid #888;
    outline: none;
    bottom: 0;
    transition: all .25s;
    &:focus {
      border-color: @orange;
      + label {
        top: 3px;
        font-size: 12px;
        color: @orange;
      }
    }
  }
  > label {
    position: absolute;
    top: 24px;
    left: 3px;
    color: #888;
    cursor: text;
    transition: all .25s;
  }
}</script>
</body>
</html>