Login Form text boxes won't disappear-CodePudding

I've created this simple Login form for a uni project and for some reason the box around the text field is still showing, I want it to be invisible. How the form works is; when a user clicks on either field, the placeholder lifts up and they type below it (refer to screenshot) For some reason, however, the text box is still there. Any help would be greatly appreciated.

.center {
      position:fixed;
      top: 40%;
      left: 70%;
      transform: translate(-50%, -50%);
      width: 720px;
      height: 350px;
      background: linear-gradient(180deg, white, silver );
      size: 100%;
      border-style: solid;
      border-color: black;
      border-width: 1px;
    
    }
    
    .center h1{
      text-align: center;
      padding: 0 0 20px 0;
      border-bottom: 1px solid silver;
    }
    
    .center form {
        padding: 0 40px;
    }
    
    form .txt_field {
    position: relative;
    border-bottom: 2px solid #adadad;
    margin: 30px 0;
    }
    
    .txt-field input {
     width: 100%;
     padding: 0 5px;
     height: 40px;
     font-size: 16px;
     border: none;
     background: none;
     outline: none;
    }
    
   
    
    .no-outlin:focus{
      outline: none;
    }
    
    .txt_field label{
      position: absolute;
      top: 50%;
      left: 5px;
      color: #adadad;
      transform: translateY(-50%);
      font-size: 16px;
      pointer-events: none;
      transition: .7s;
      border: none;
    }
    
    .txt_field span::before{
      content: '';
      position: absolute;
      top: 40px;
      left: 0;
      width: 0%;
      height: 2px;
      background: #2691d9;
      transition: .7s;
    }
    
    .txt_field input:focus ~ label,
    .txt_field input:valid ~ label {
      top: -5px;
      color: #2691d9;
    }
    
    .txt_field input:focus ~ span::before,
    .txt_field input:valid ~ span::before {
      width: 100%;
    }
    
    .pass {
      margin: -5px 0 20px 5px;
      color: #a6a6a6;
      cursor: pointer;
    }
    
    .pass:hover {
      text-decoration: underline;
    }
    
    input[type="submit"]{
      width: 100%;
      height: 50px;
      border: 1px solid;
      background: #2691d9;
      border-radius: 25px;
      font-size: 18px;
      color: #e9f4fb;
      font-weight: 700;
      cursor: pointer;
      outline: none;
    }
    
    input[type="submit"]:hover{
      border-color: #2691d9;
      transition: .5s;
    }
    
    .signup_link {
      margin: 30px;
      text-align: center;
      font-size: 16px;
      color: #666666;
    }
    
    .signup_link a{
      color: #2691d9;
      text-decoration: none;
    }
    
    .signup_link a:hover{
      color: #2691d9;
      text-decoration: underline;
    }

<head>
    
    </head>
    <body >
    
      <div >
        <h1> Login </h1>
        <form method="post" >
         <div >
           <input  type="text" required>
           <span></span>
           <label>Username</label>
      </div>
      <div >
        <input type="password" required>
        <span></span>
        <label>Password</label>
    </div>
    <div > Forgotten Password? </div>
    <input type="submit" value="Login">
    <div >
      Not a Member? <a  routerLink="/register">Create an Account!</a>
    </div>
    
    </form>
    </div>

Click here for sceenshot

CodePudding user response：

There's a typo in your CSS

Change the txt-field in your CSS to txt_field

This is your code:

.center {
  position: fixed;
  top: 40%;
  left: 70%;
  transform: translate(-50%, -50%);
  width: 720px;
  height: 350px;
  background: linear-gradient(180deg, white, silver);
  size: 100%;
  border-style: solid;
  border-color: black;
  border-width: 1px;
}

.center h1 {
  text-align: center;
  padding: 0 0 20px 0;
  border-bottom: 1px solid silver;
}

.center form {
  padding: 0 40px;
}

form .txt_field {
  position: relative;
  border-bottom: 2px solid #adadad;
  margin: 30px 0;
}

.txt_field input {
  width: 100%;
  padding: 0 5px;
  height: 40px;
  font-size: 16px;
  border: none;
  background: none;
  outline: none;
}

.no-outlin:focus {
  outline: none;
}

.txt_field label {
  position: absolute;
  top: 50%;
  left: 5px;
  color: #adadad;
  transform: translateY(-50%);
  font-size: 16px;
  pointer-events: none;
  transition: .7s;
  border: none;
}

.txt_field span::before {
  content: '';
  position: absolute;
  top: 40px;
  left: 0;
  width: 0%;
  height: 2px;
  background: #2691d9;
  transition: .7s;
}

.txt_field input:focus~label,
.txt_field input:valid~label {
  top: -5px;
  color: #2691d9;
}

.txt_field input:focus~span::before,
.txt_field input:valid~span::before {
  width: 100%;
}

.pass {
  margin: -5px 0 20px 5px;
  color: #a6a6a6;
  cursor: pointer;
}

.pass:hover {
  text-decoration: underline;
}

input[type="submit"] {
  width: 100%;
  height: 50px;
  border: 1px solid;
  background: #2691d9;
  border-radius: 25px;
  font-size: 18px;
  color: #e9f4fb;
  font-weight: 700;
  cursor: pointer;
  outline: none;
}

input[type="submit"]:hover {
  border-color: #2691d9;
  transition: .5s;
}

.signup_link {
  margin: 30px;
  text-align: center;
  font-size: 16px;
  color: #666666;
}

.signup_link a {
  color: #2691d9;
  text-decoration: none;
}

.signup_link a:hover {
  color: #2691d9;
  text-decoration: underline;
}

<head>

</head>

<body >

  <div >
    <h1> Login </h1>
    <form method="post" >
      <div >
        <input type="text" required>
        <span></span>
        <label>Username</label>
      </div>
      <div >
        <input type="password" required>
        <span></span>
        <label>Password</label>
      </div>
      <div > Forgotten Password? </div>
      <input type="submit" value="Login">
      <div >
        Not a Member? <a  routerLink="/register">Create an Account!</a>
      </div>

    </form>
  </div>

CodePudding user response：

target the input not thee div

.center {
  position: fixed;
  top: 40%;
  left: 70%;
  transform: translate(-50%, -50%);
  width: 720px;
  height: 350px;
  background: linear-gradient(180deg, white, silver);
  size: 100%;
  border-style: solid;
  border-color: black;
  border-width: 1px;
}

.center h1 {
  text-align: center;
  padding: 0 0 20px 0;
  border-bottom: 1px solid silver;
}

.center form {
  padding: 0 40px;
}

form .txt_field {
  position: relative;
  border-bottom: 2px solid #adadad;
  margin: 30px 0;
}

.txt_field input:focus {
  outline: none;
}

.no-outlin:focus {
  outline: none;
}

.txt_field label {
  position: absolute;
  top: 50%;
  left: 5px;
  color: #adadad;
  transform: translateY(-50%);
  font-size: 16px;
  pointer-events: none;
  transition: .7s;
  border: none;
}

.txt_field span::before {
  content: '';
  position: absolute;
  top: 40px;
  left: 0;
  width: 0%;
  height: 2px;
  background: #2691d9;
  transition: .7s;
}

.txt_field input:focus~label,
.txt_field input:valid~label {
  top: -5px;
  color: #2691d9;
}

.txt_field input:focus~span::before,
.txt_field input:valid~span::before {
  width: 100%;
}

.pass {
  margin: -5px 0 20px 5px;
  color: #a6a6a6;
  cursor: pointer;
}

.pass:hover {
  text-decoration: underline;
}

input[type="submit"] {
  width: 100%;
  height: 50px;
  border: 1px solid;
  background: #2691d9;
  border-radius: 25px;
  font-size: 18px;
  color: #e9f4fb;
  font-weight: 700;
  cursor: pointer;
  outline: none;
}

input[type="submit"]:hover {
  border-color: #2691d9;
  transition: .5s;
}

.signup_link {
  margin: 30px;
  text-align: center;
  font-size: 16px;
  color: #666666;
}

.signup_link a {
  color: #2691d9;
  text-decoration: none;
}

.signup_link a:hover {
  color: #2691d9;
  text-decoration: underline;
}

<head>

</head>

<body >

  <div >
    <h1> Login </h1>
    <form method="post" >
      <div >
        <input type="text" required>
        <span></span>
        <label>Username</label>
      </div>
      <div >
        <input type="password" required>
        <span></span>
        <label>Password</label>
      </div>
      <div > Forgotten Password? </div>
      <input type="submit" value="Login">
      <div >
        Not a Member? <a  routerLink="/register">Create an Account!</a>
      </div>

    </form>
  </div>