There is a markup:

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

Her style:

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

The task inside the input is to add an icon, now I'm trying to make an implementation like this:

 .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: '-'; }

Unfortunately it does not work, please help.

1 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">

Option two with hover and picture in SVG format and also decided to give an example, when input and focus

 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; } 
 <input type="text" />

  • The very logic of your option decides, but as part of this logic, individually change the color of the icon and background? For example, when: hover, you will need a gray background and a blue icon. - Anton Chechelev
  • So change the background-color and background-image separately - Nikita Umnov