Какими способами можно в input поставить картинку перед placeholder?

Question

.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 и как с ним взаимодействовать(но ничего что мне нужно)

Answer 1

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

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

Answer 2

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

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

Answer 3

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

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

БЛОГ НА HUSL

Какими способами можно в input поставить картинку перед placeholder?

Ответы (3 шт):