Css moves to right the center based on width-CodePudding

when the input becomes focused the whole input goes to the right of 5%, i tried to do translateX(-5%) but it is ugly, idkw it happens and it's annoying

.box {
  position: absolute;
  width: 300px;
  padding: 30px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgb(0, 0, 0, 0.4);
  text-align: center;
  border-radius: 24px;
}

.box input[type="text"],
.box input[type="password"] {
  border: 0;
  background: none;
  display: block;
  margin: 20px auto;
  text-align: center;
  border: 3px solid rgb(50, 92, 221);
  padding: 14px 10px;
  width: 220px;
  outline: none;
  color: white;
  border-radius: 24px;
  transition: 1s;
}

.box input[type="text"]:focus,
.box input[type="password"]:focus {
  width: 270px;
  border-color: rgb(242, 175, 62);
  /*transform : translateX(-5%)*/
}

<div>
  <input type="submit" value="Login" id="loginButton">
  <form action="homepage.html"  method="POST">
    <h1>Login</h1>
    <input type="text" placeholder="Enter Username" id="username">
    <input type="password" placeholder="Enter Password" id="password">
    <input type="submit" value="Login" id="loginSubmitButton">
  </form>
</div>

CodePudding user response：

My opinion is, your text inputs in focused state have width of 220 20 (padding) 40 (margin) 6 (border) and if the box hasn't enough width, the input won't be on center, so my suggestion is to try percent width for inputs (second snippet)

.box {
  position : absolute;
  width : 300px;
  padding : 30px;
  top : 50%;
  left : 50%;
  transform : translate(-50%, -50%);
  background : rgb(0,0,0,0.4);
  text-align : center;
  border-radius : 24px;
}
.box input[type="text"],.box input[type="password"]{
  border : 0;
  background : none;
  display : block;
  margin : 20px auto;
  text-align : center;
  border : 3px solid rgb(50, 92, 221);
  padding :14px 10px;
  width : 220px;
  outline : none;
  color : white;
  border-radius : 24px;
  transition : 1s;
}

.box input[type="text"]:focus,.box input[type="password"]:focus {
  width : 270px;
  border-color : rgb(242, 175, 62);
  /*transform : translateX(-5%)*/
}

<div>
  <input type="submit" value="Login" id="loginButton">
  <form action="homepage.html"  method="POST">
    <h1>Login</h1>
    <input type="text" placeholder="Enter Username" id="username">
    <input type="password" placeholder="Enter Password" id="password">
    <input type="submit" value="Login" id="loginSubmitButton">
  </form>
</div>

.box {
  position : absolute;
  width : 300px;
  padding : 30px;
  top : 50%;
  left : 50%;
  transform : translate(-50%, -50%);
  background : rgb(0,0,0,0.4);
  text-align : center;
  border-radius : 24px;
}
.box input[type="text"],.box input[type="password"]{
  border : 0;
  background : none;
  display : block;
  margin : 20px auto;
  text-align : center;
  border : 3px solid rgb(50, 92, 221);
  padding :14px 10px;
  width : 80%;
  outline : none;
  color : white;
  border-radius : 24px;
  transition : 1s;
}

.box input[type="text"]:focus,.box input[type="password"]:focus {
  width : 90%;
  border-color : rgb(242, 175, 62);
}

<div>
  <input type="submit" value="Login" id="loginButton">
  <form action="homepage.html"  method="POST">
    <h1>Login</h1>
    <input type="text" placeholder="Enter Username" id="username">
    <input type="password" placeholder="Enter Password" id="password">
    <input type="submit" value="Login" id="loginSubmitButton">
  </form>
</div>