Блог

Главная - Вопросы по программированию - Как сделать панель ввода с наложенным на нее значком отзывчивой, расположив ее по вертикали в той форме, в которой она находится?

Как сделать панель ввода с наложенным на нее значком отзывчивой, расположив ее по вертикали в той форме, в которой она находится?

#html #css

Вопрос:

У меня есть две панели ввода со значками на левой стороне, центрированными внутри формы, которая также центрирована по горизонтали. К сожалению, при уменьшении страницы по горизонтали текст заполнителя и значок пересекаются друг с другом, и мне до сих пор не удалось найти способ центрировать форму по вертикали. Что я могу сделать, чтобы исправить обе проблемы?

 .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>

Ответ №1:

Я думаю, что это будет полезно для вас. Решение состояло в том, чтобы добавить padding .signup-form и изменить width 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>
Метки: , ,