Как сверстать этот элемент?

Question

[yazeh]

Спасибо пожалуйста

Answer 1

[profesor08]

Слева селект (или любой выпадающий список), посредине инпут, справа кнопка. Задай им фон и правильный бордер. Расположить в ряд можешь задав контейнеру display:flex.

.etot-element {
  display: flex;
}

<div class="etot-element">
  <select>
    <option>Browse</option>
    <option>Blabla</option>
  </select>
  <input type="text" placeholder="Search for Item...">
  <button><div class="search-icon"></div></button>
</div>

Comments

[yazeh]

Спасибо большое!
У вас в теге button вложен тег div это правильно, вроде по правилам в div должны вложен все потоковые теги.
или я не так что то понял?
Можете прояснить если вам не сложно.
Спасибо.

[Bondi]

yazeh,div скорее всего для иконки впихнули, но это плохая практика. Лучше иконку задать через css, если есть необходимость через html добавлять, то используй тег <i> или <span>

[profesor08]

Bondi, нету никакой разницы, div там, span, i, или что-то еще. Его поведение задается через css.

[Bondi]

profesor08, в плане семантики разница есть - div это блочный элемент, i и span - строчные

[profesor08]

Bondi, но что есть иконка? Она может быть блоком, может быть строкой. i используется для краткости записи в html, если используется препроцессор, то не имеет значение какой там тег, имеет значение как он стилизован. div это базовый строительный кубик, а i это элемент для стилизации текста. Так-же для иконки важны такие параметры как высота, ширина и отступы, которые строчные элементы не воспринимают.

Answer 2

[tyzberd]

посмотрите как сделано в bootstrap https://getbootstrap.com/docs/4.1/components/input...

Comments

[yazeh]

Спасибо большое!

Answer 3

[weranda]

Вы где нашли этот элемент, там код и посмотрите.
К примеру:

<form action="">
	<select name="" id="">
		<option value=""></option>
		<option value=""></option>
		<option value=""></option>
	</select>
	<input type="text">
	<input type="submit">
</form>

Answer 4

[Bondi]

yazeh, нет конечно, какой нафиг div в кнопке.
У input используй правильный тип type="search".
Общая структура:

<form>
 <select>
  <option></option>
  .......
  <option></option>
 </select>
 <input type="search">
 <button type="submit"></button"
</form>

P.s. не забудь добавить необходимые атрибуты для тегов.

Comments

[yazeh]

Спасибо вам