0

Подскажите пожалуйста, как можно вставить картинку в input, что бы получилось вот так пример

У меня получается вот так:

.input {
  margin-top: 5px;
  margin-right: 20px;
  width: 198px;
  height: 30px;
  outline: none;
  padding: 0px;
  margin: 0px;
}

.borderInput {
  width: 200px;
  margin-bottom: 20px;
  color: var(--grey-pop);
  height: 40px;
  padding-left: 45px;
  padding-right: 20px;
  font-size: 16px;
  height: 40px;
  border: solid 1px black;
}

.icon {
  position: absolute;
  top: 10px;
  left: 15px;
}

.imgInput {
  height: 50px;
  border: none;
}
<div class="imgInput">
  <div class="container">
    <img src="https://cdn3.iconfinder.com/data/icons/forum-emoticons-2-20x20/20/Brief.png" class="icon">
    <div class="borderInput">
      <Input id="email" type="email" name="email" type="text" class="input" placeholder="Ваша почта" />
    </div>
  </div>
</div>

Есть ещё проблема, использовать border:none; или border: solid 1px white; не прокатит, есть класс в котором стили для input уже определены, в нем ничего нельзя изменить, так как все эти изменения пойдут по всему проекту. Может есть какая-нибудь альтернатива?

2 ответа 2

1

Попробуйте вот так:

.input {
  margin-top: 5px;
  margin-right: 20px;
  width: 198px;
  height: 30px;
  outline: none;
  padding: 0px;
  margin: 0px;
  background: url(https://cdn3.iconfinder.com/data/icons/forum-emoticons-2-20x20/20/Brief.png) no-repeat scroll 7px 7px;
padding-left:30px;
}
<div class="imgInput">
  <div class="classes.container">
      <Input id="email" type="email" name="email" type="text" class="input" placeholder="Ваша почта" />
  </div>
</div>

1
  • Большое спасибо, за помощь! 18 окт 2018 в 7:06
1

.input {
  margin-top: 5px;
  margin-right: 20px;
  width: 198px;
  height: 30px;
  outline: none;
  padding-left: 30px;
  margin: 0px;
}

.icon {
  position: absolute;
  border: none;
  margin: 7px;
}

.icon:before {
  content: url(https://cdn3.iconfinder.com/data/icons/forum-emoticons-2-20x20/20/Brief.png);
  width: 100%;
}
<div class="container-fluid ">

  <a class="submit icon"></a>
  <Input id="email" type="email" name="email" type="text" class="input" placeholder="Ваша почта"></Input>

</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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