Добавление иконки в input

221

06 марта 2019, 16:30

Есть разметка:

<div class="level-2">
  <input type="text" placeholder="Откуда" class="from">
  <input type="text" placeholder="Куда" class="where">
  <input type="text" placeholder="Вес (кг)" class="weight">
  <input type="text" placeholder="Объём (м3)" class="size">
  <a href="#" class="button blue-btn">Рассчитать стоимость</a>
</div>

Её стиль:

.main .online-services .cost .level-2 > input {
    flex: 1 1 0;
    border-radius: 0px;
    margin-left: -0.5px;
}

Задача внутрь input добавить иконку, сейчас пробую сделать реализацию так:

.main .online-services .cost .level-2 input::before {
    background: url(../image/icons/svg/024-pin.svg);
    width: 20px;
    height: 20px;
    right: 0;
    z-index: 999;
    content: '-';
  }

К сожалению не работает, просьба помочь.

Answer 1

input { 
  background: url(https://uncovery.me/websend/user_icons/36a93bf5-af50-433e-b887-963923bcf3a8.png); 
  background-repeat: no-repeat; 
  background-position: 100% 0; 
  height: 20px; 
  padding-right: 20px; 
}

<input type="text" placeholder="Откуда" class="from">

Вариант два с hover и картинкой в формате SVG и еще решил привести пример, когда input а фокусе

input { 
  background-image: url('data:image/svg+xml,\ 
          <svg  xmlns="http://www.w3.org/2000/svg" \ 
           viewbox="0 0 21 21" width="21" height="21" >\ 
          <style>svg{background: #000;}\ 
          <\/style> <path fill="red"  d="M11 0 21 21 0 21z"></path></svg>'); 
  background-repeat: no-repeat; 
  background-position: 100% 0; 
  height: 20px; 
  width: 200px; 
  padding-right: 120px; 
  transition: background .5s; 
} 
 
input:hover { 
  background-color: green; 
  background-image: url('data:image/svg+xml,\ 
          <svg  xmlns="http://www.w3.org/2000/svg" \ 
           viewbox="0 0 21 21" width="21" height="21" >\ 
          <style>svg{background: #fff;}\ 
          <\/style> <path fill="red"  d="M0 0 21 0 11 21z"></path></svg>'); 
  background-repeat: no-repeat; 
  background-position: 100% 0; 
  height: 20px; 
  width: 200px; 
  padding-right: 120px; 
} 
 
input:focus { 
  background-color: blue; 
  background-image: url('data:image/svg+xml,\ 
          <svg  xmlns="http://www.w3.org/2000/svg" \ 
           viewbox="0 0 21 21" width="21" height="21" >\ 
          <style>svg{background: #fff;}\ 
          <\/style> <circle fill="deepPink" stroke="green" stroke-width="2" cx="11" cy="11" r="5"></circle></svg>'); 
  background-repeat: no-repeat; 
  background-position: 100% 0; 
  height: 20px; 
  width: 200px; 
  padding-right: 120px; 
}