<form action="">
  <input type="text" id="fullName" name="fullName" placeholder=" ">
  <label for="fullName">Full Name</label>
  <input type="email" id="email" name="email" placeholder=" ">
  <label for="email">Email</label>
  <input type="password" id="password" name="password" placeholder=" ">
  <label for="password">Password</label>
  <button type="button">Submit</button>
</form>

body {
  display: flex;
}

form {
  width: 30rem;
  display: block;
  margin: 3rem auto;
  padding: 3rem;
  border: 10px solid #999;
}

label {
  display: block;
  transform: translate(0, -2.75rem);
}

input {
  width: 100%;
  margin-top: 1.5rem;
  padding: 0.25rem;
  border: none;
  border-bottom: 2px solid #111;
  transition: border-color 0.2s ease;
}

input:focus {
    outline: none;
    border-color: green;
}

button {
  padding: 0.75rem 1.5rem;
  border: 2px solid #111;
  background-color: #111;
  color: #fff;
  font-weight: bold;
}


@supports (not (-ms-ime-align:auto)) {
    label {
      color: #999;
      transform: translate(0.25rem, -1.5rem);
      transition: all 0.2s ease-out;
    }
    
    input:focus + label,
    input:not(:placeholder-shown) + label {
      color: #111;
      transform: translate(0, -2.75rem);
    }
}