-1

Возможно ли сделать такое на чистом html используя сторонние библиотеки по типу Font Awesomeвведите сюда описание изображения

2
  • Пожалуйста, уточните вашу конкретную проблему или приведите более подробную информацию о том, что именно вам нужно. В текущем виде сложно понять, что именно вы спрашиваете. 8 июн 2022 в 5:20
  • Конечно можно, читаете про flexbox и вперёд
    – De.Minov
    8 июн 2022 в 5:32

1 ответ 1

2

Какие ленивые вопросы пошли ...

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

* {
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}

.search-block {
  display: flex;
  justify-content: center;
  align-items: center;
}

.search-block > div {
  margin: 0 6px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.search-block > div:not(.search-input) {
  cursor: pointer;
  border-radius: 50%;
}

.search-block > div:not(.search-input):hover {
  box-shadow: inset 0 0 6px 1px rgba(255, 0, 0, .4),
              0 0 12px 2px rgba(255, 0, 0, .4);
}

.search-input {
  width: 100%;
}

.search-input > input {
  border-radius: 2px;
  width: 100%;
  border: none;
  outline: none;
  background-color: #ECECEC;
  padding: 8px 12px;
}
<div class="search-block">
  <div>
    <img src="https://img.icons8.com/emoji/24/undefined/paperclip-emoji.png" />
  </div>
  <div>
    <img src="https://img.icons8.com/external-simple-line-edt.graphics/24/undefined/external-Image-images-simple-line-edt.graphics-19.png" />
  </div>
  <div>
    <img src="https://img.icons8.com/external-tulpahn-basic-outline-tulpahn/24/undefined/external-emoji-birthday-party-tulpahn-basic-outline-tulpahn.png" />
  </div>
  <div class="search-input">
    <input type="text" placeholder="Печатать ...">
  </div>
  <div>
    <img src="https://img.icons8.com/flat-round/24/undefined/circled-chevron-right.png" />
  </div>
</div>

1
  • 1
    Лайкнул за "ленивые вопросы", да и решение хорошее
    – De.Minov
    8 июн 2022 в 5:39

Ваш ответ

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

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