How do I make a input bar with an icon overlaid on it responsive, center vertically the form it is in?

user_9344887 0
Viewed 22

I have two input bars with icons on the left side centered inside a form, which is also centered horizontally. Unfortunately, shrinking the page horizontally causes the placeholder text, and the icon to cross each other, and I have still not managed to find a way to center the form vertically. What can I do fix both issues?

.body-color{
    background-color: rgb(30,94,255);
}


.signup-form{
    text-align: center;
    margin: auto;
    margin-top: 5%;
    width: 50vw;
    height: fit-content;
    border-radius: 15px;
    background-color: white;
    box-shadow: 0 0 15pt 2pt black;
}

input{
    width: 75%;
    margin-top: 20px;
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 20px;
    border: 0; 
    box-shadow: 0 0 15pt 2pt #D3D3D3;
    outline: 0;
    text-indent: 35px;
}

.input-container{
    position: relative;
}

i{
    position: absolute;
    font-size: 25px;
    top: 30px;
    left: 75px;
 }
<form class="signup-form">
     <div class="input-container">
         <i class="bi bi-person-circle"></i>
         <input type="text" required placeholder="Username"/> 
     </div>
     <div class="input-container">
         <i class="bi bi-lock"></i>
         <input type="password" required placeholder="Password"/> 
     </div>
 </form>

css html
1 Answers

I think it will be useful for you. The solution was to add padding to .signup-form and change the width to 100%.

* {
  
}

.body-color {
  background-color: rgb(30, 94, 255);
}

.signup-form {
  text-align: center;
  margin: auto;
  margin-top: 5%;
  width: 50vw;
  height: fit-content;
  border-radius: 15px;
  background-color: white;
  box-shadow: 0 0 15pt 2pt black;
  padding: 15px 25px; /* New line */
}

input {
  width: 100%; /* Changed */
  margin-top: 20px;
  margin-bottom: 15px;
  padding: 10px;
  border-radius: 20px;
  border: 0;
  box-shadow: 0 0 15pt 2pt #d3d3d3;
  outline: 0;
  text-indent: 35px;
  box-sizing: border-box; /* New line */
}

.input-container {
  position: relative;
}

i {
  position: absolute;
  font-size: 16px; /* Changed */
  top: 30px;
  left: 17px; /* Changed */
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<form class="signup-form">
  <div class="input-container">
    <i class="bi bi-person-circle"></i>
    <input type="text" required placeholder="Username" />
  </div>
  <div class="input-container">
    <i class="bi bi-lock"></i>
    <input type="password" required placeholder="Password" />
  </div>
</form>

user_155451160
Related