0

Верстаю главную страницу google,большого опыта не имею,дошел до создания формы ввода запроса и тут на тебе.Надо добавить три фотографии в input,значок поиска,клавиатуры и микрофона(думаю все знают как выглядит форма в гугле).Нарыл инфу о том,что можно для input прописать background-image,но тогда можно поместить только один значок в форму,а мне нужно 3.Подскажите как быть.

1
  • Чтобы получить ответ, нужно показать как вы пытались решить проблему. То, что вы понимаете, в чем недостаток решения, которое вы наши первым, это хорошо, но нужно чтобы вы показали, как вы попытались это преодолеть. Помощь тут добровольная, поэтому требовать финального решения некорректно. 18 сен 2019 в 19:00

3 ответа 3

2

Если Вы верстаете главную страницу гугла, то предлагаю, прежде всего, посмотреть как это реализовано у них, а не браться за свой велосипед. Сделать это можно используя 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>

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

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

-2

Вроде бы решил,можно указать вместо 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 тем не менее,цели я пока не добился,значок поиска стоит как и должен,а вот значок клавиатуры и микрофона должны быть кнопками,как это реализовать я пока не знаю:)

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.