вставить пару изображений в input

Если Вы верстаете главную страницу гугла, то предлагаю, прежде всего, посмотреть как это реализовано у них, а не браться за свой велосипед. Сделать это можно используя Chrome Dev Tools (если используете Chrome, но у всех современных браузеров есть что-то подобное).

Если упрощенно, то у гугла этот компонент сверстан примерно вот так:

<div id="search-component">
  <div id="icon-search"></div>
  <div id="search-input">
    <input>
  </div>
  <div id="icon-mic"></div>
</div>

Такое решение позволит сделать микрофон кнопкой без особых проблем, если требуется.

1. Вы не поверите, но КАЖДОЕ из CSS-свойств, относящихся к фону, поддерживает множественные значения через запятую.
2. Запихайте инпут и кнопки в ряд в общий контейнер. Сделайте инпуту фон прозрачным, а бордеры уберите вообще. Обстильте сам контейнер вместо инпута, ну и кнопки независимо.

.container { 
  display: inline-flex; 
  border: 1px solid #aaa; 
  box-shadow: 0 0 5px gray inset; 
  border-radius: 5px; 
  overflow: hidden; 
} 
 
input { 
  border: 0px none; 
  padding: 5px 10px; 
  background: none; 
} 
 
.button { 
  text-align: center; 
  padding: 5px; 
  border-left: 1px solid #ccc; 
  margin-left: 2px; 
  color: salmon; 
}

<div class="container"> 
  <input type="text" placeholder="Search..."></input> 
  <div class="button search">Search</div> 
  <div class="button voice">Voice</div> 
  <div class="button photo">Photo</div> 
</div>

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

background: url("media/img/search.png")no-repeat 10px 7px,url("media/img/keyboard.png") no-repeat 470px 6px,url("media/img/microphone.png") no-repeat 510px 8px;
background-size: 23px;

P.S тем не менее,цели я пока не добился,значок поиска стоит как и должен,а вот значок клавиатуры и микрофона должны быть кнопками,как это реализовать я пока не знаю:)