Как верстать картинки внутри input прижатые к левому краю?

Question

[Павел]

UPD. мой код

<input placeholder="Введите название препарата" id="search"  size="16" type="text">
<button class="btn" type="button"></button>

вся соль в верстке "ровно" , у меня только так выходит

Comments

[Алексей Ярков]

)))) Это правый край

[Павел]

Алексей Ярков: )))) ошибочка , само собой к правому :) но я думаю если пример будет к левому краю то тоже хорошо

Answer 1

[ukoHka]

1. Установить кнопке и полю одинаковую высоту и одинаковую границу.
   
2. Убрать у кнопки левую границу, а у поля - правую.
   
3. Установить скругление углов у поля только для левой стороны, а у кнопки - только для правой.
   
4. Убрать контур
   

.input, .button {
  float: left;
  display: block;
  height: 30px;
  outline: none;
  box-sizing: border-box;
  border: 1px solid #ddd;
}
.input {
  border-right: none;
  border-radius: 3px 0 0 3px;
}
.button {
  border-left: none;
  border-radius: 0 3px 3px 0;
}

Answer 2

[Ярослав Иванов]

https://jsfiddle.net/space2pacman/xdnqfz2k/

Comments

[Ярослав Иванов]

mrusklon подходит ?

[Павел]

Ярослав Иванов: да , то что мне нужно , спасибо

Answer 3

[Александр Пупкин]

Как впихнуть кнопку внутрь инпута?

Comments

[Павел]

пример рабочий но сама верстка осталась под пеленой тумана