Let's make Input field in different style with pure HTML AND CSS .

Input Field

Let's make guys some different input field using HTML AND CSS pure like water .

So let's start with index.html 

<div class="box">

   <input type="text" name="text" id="text" /> 

   <input type="password" name="pass" id="pass" value=""/>

   <label for="text" id="user">a Username </label>

   <label for="pass" class="pass"> Password</label>

</div>

And next step to add css file  style.css

@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Kdam+Thmor+Pro&display=swap');

*{

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

body {

  background-color: #000;

  height: 100vh;

  width: 100%;

  font-size: 15pt;

  display: flex;

  justify-content: center;

  align-items: center;

}

.box{

  height: 400px;

  width: auto;

  background-color: #00203f;

  position: absolute;

  border: 2px solid #847ADF;

  border-radius: 20px;

}

input[type=text]{

  background-color: transparent;

  color: #fff;

  width: 372px;

  font-size: 20px;

  font-family: 'Kdam Thmor Pro', sans-serif;

  padding: 3px;

  margin: 40px 55px;

  position: relative;

  top: 100px;

  border: 2px solid #847ADF;

  outline: none;

}

input[type=text]:focus~#user{

  background-color: #00203f;

  height: 20px;

  width: 100px;

  font-size: 10px;

  top: 126px;

  left: 11.5rem;

  transition:all 0.5s;

  border: 2px solid #847ADF;

}

input[type=password]{

  background-color: transparent;

  color: #fff;

  width: 372px;

  font-size: 20px;

  font-family: 'Kdam Thmor Pro', sans-serif;

  padding: 3px;

  margin: 0 55px;

  border: 2px solid #847ADF;

  outline: none;

  position: absolute;

  top: 220px;

  left: 0;

}

input[type=password]:focus~.pass{

  height: 20px;

  width: 100px;

  font-size: 10px;

  left: 8rem;

  bottom: 170px;

  border: 2px solid #847ADF;

  transition:all 0.5s;

}

#user{

  background-color: #00203f;

  color: #CAFF00;

  height: 35px;

  width: 368px;

  font-size: 20px;

  display: inline-block;

  text-align: center;

  position: absolute;

  top: 148px;

  left: 3.6rem;

  z-index: 10;

  font-family: 'Righteous', cursive;

}

.pass{

  background-color: #00203F;

  color: #CAFF00;

  height: 35px;

  width:368px;

  font-size: 20px;

  margin: 0 57px;

  display: inline-block;

  text-align: center;

  position: absolute;

  left: 0;

  bottom: 138px;

  font-family: 'Righteous' , cursive;

  z-index: 10;

}

Here is the result