CSS значок спрайта при вводе формы - Как изменить выравнивание?

Question

Я могу создать текстовый ввод, включая красивый значок в нем (когда у меня есть только один значок):

CSS:

.phoneIcon {
    background-image: url('../icons/phone.png');
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 45px;
}

HTML:

  <div class="w3-padding-16">
    <input type="text" class="phoneIcon w3-input" />
  </div>

Успешный результат:

Now the the problem is when having many icons and want to use CSS sprite.

CSS:

.phoneIcon {
    background-image: url('../icons/map118.png');
    background-repeat: no-repeat;    
    background-position: -0px -122px;    
    padding-right: 45px;    
}

HTML : same as above.

Result : unsuccessful: введите описание изображения здесь

Не знаю, как переместить мой новый значок вправо. В режиме спрайта у меня есть background-position: -0px -122px;, и я не могу использовать background-position: right center; одновременно. С другой стороны, положение фона по умолчанию в CSS находится в верхнем левом углу, и мне нужно использовать атрибут position, чтобы указать положение моего значка (в пикселях), и я не могу использовать его для редактирования места выбранного - значок в поле ввода. Я пробовал float:right, но :(. Я пытался использовать и background-position: -0px -122px;, и background-position: right center;, результат был fooli sh, потому что он загружает другой значок вместо значка моего желания. (На самом деле он всегда загружается "по центру справа "положение изображения спрайта).

Мне просто нужно переместить значок в правую сторону. Я не знаю, как заставить его загружать позицию" 0px -122px "и отображать его справа от ввода ящик.

Answer 1

Я не уверен, что понимаю проблему. Вы используете один и тот же класс для нескольких значков? Я сделал решение для одного значка в одном поле ввода, например:

.w3-padding-16 img {
  position: absolute;
}

.w3-padding-16 {
  width: 300px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

img {
  /* adjust these as you see fit
  If you increase one, you'll have to increae
  the other as well.
  */
  width: 30px;
  padding-right: 10px;
}

.input-field {
  width: 100%;
  padding: 10px;
  text-align: left;
}

<div class="w3-padding-16">
    <img src="https://img.icons8.com/fluent/100/000000/phone.png" width="100%"/>
    <input class="input-field" type="text" />
</div>

https://jsfiddle.net/battleaxe/voj1a8ry/9/