0

введите сюда описание изображения

.wrapper__form__container {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    margin-top: 33px;
    .wrapper__form__container_item {
      label {
        padding-left: 10px;
      }
      input {
        width: 281px;
        height: 46px;
      }
      input::placeholder {
        font-size: 13px;
        font-family: "Open Sans";
        font-weight: 400;
        color: #a9a9a9;
      }
    }
<div class="wrapper__form__container">
          <div class="wrapper__form__container_item">
            <label for="#">
              <input type="text" name="login" placeholder="Full name" />
            </label>
          </div>
          <div class="wrapper__form__container_item">
            <label for="#"> 
              <input type="text" name="mail" placeholder="Email address" />            
            </label>
          </div>
          <div class="wrapper__form__container_item">
            <label for="#">
              <input type="number" name="phone"  placeholder="Phone number" />
            </label>
          </div>
          <div class="wrapper__form__container_button">
            <button>Request a quote</button>
          </div>
        </div>

Каким способом можно в самом input поставить изображение перед текстом-подсказкой(как на скрине)? Гуглил но выкидывало только о том,что такое placeholder и как с ним взаимодействовать(но ничего что мне нужно)

1
  • Вы не правильно прописываете классы и scss разметку пишете тоже не правильно. В html основной класс не стоит писать через "__" - оно используется для определения вложенных классов для scss. Вам следовало написать "wrapper-form-container", а вложенному элементу "wrapper-form-container__item" и потом в scss пишете ".wrapper-form-container {&__item {yourStyles}}" 10 апр в 5:14

3 ответа 3

1

Можно сделать это таким образом. Просто вместо голубого фона загрузите картинки.

.wrapper__form__container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: 0 auto;
  gap: 15px;
  margin-top: 33px;
}
.wrapper__form__container input {
  width: 281px;
  height: 46px;
  font-size: 16px;
  font-family: "Open Sans";
  font-weight: 400;
  color: #a9a9a9;
  padding-left: 40px;
  position: relative;
}
.wrapper__form__container label {
  position: relative;
}
.wrapper__form__container label:before {
  content: '';
  position: absolute;
  top: calc(50% - 10px);
  left: 12px;
  z-index: 10;
  display: block;
  width: 20px;
  height: 20px;
  background-color: lightblue;
}
<div class="wrapper__form__container">
  <div class="wrapper__form__container_item">
    <label>
      <input type="text" name="login" placeholder="Full name" />
    </label>
  </div>
  <div class="wrapper__form__container_item">
    <label> 
      <input type="text" name="mail" placeholder="Email address" />            
    </label>
  </div>
  <div class="wrapper__form__container_item">
    <label>
      <input type="number" name="phone"  placeholder="Phone number" />
    </label>
  </div>
  <div class="wrapper__form__container_button">
    <button>Request a quote</button>
  </div>
</div>

0

Попробуй так.

input.icon{
    background: url(ico.png) no-repeat center left;
    padding-left:20px;
}
2
  • Как бы получилось,но теперь у меня сам инпут стал прозрачным,он исчез и стали видны только картинка и текст-подсказка) 28 июл 2020 в 20:18
  • Как только инпуту влезают в дефолтный фон или бордер, у него сбрасываются ВСЕ соответствующие свойства. Укажи инпуту background-color и border явно. 29 июл 2020 в 8:55
0

Вроде так можна :)

input.icon{ background: url(ico.png) no-repeat 20px center; }

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.