Поисковая форма (поисковое поле = выпадающий список)

@serauto79 · Регистрация: 02.04.2015

Студворк — интернет-сервис помощи студентам

Доброго времени суток!

Подскажите как лучше реализовать верстку поискового поля input + выпадающий список select
Нужно чтобы визуально было как на скриншоте что прикрипил

Поле там где город МОСКВА, это input
А выпадающий список с категории где ПИЦЦА это select

Нужно чтобы визуально выглядело так, может есть у кого готовые примеры или может гдето видели пример реализации такой?

@serauto79 · 11.11.2025, 23:23 **[ТС]**

Вот к такой форме хтмл применить нужно!

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<form action="poisk.php" method="get">
 
<div class="deletion-search-bar">
<input class="typeahead" type="text" name="location" data-provide="typeahead" id="mySearchInput" placeholder="Город..." value="Москва">
<span id="clearButton" class="clear-button">&times;</span>
</div>
 
<select id="category" name="category" placeholder="выбрать...">
    <option value="" hidden disabled selected>выбрать...</option>
    <optgroup label="Еда">
      <option>Пицца</option>
      <option>Суши</option>
    </optgroup>
    <optgroup label="Напитки">
      <option>Кола</option>
      <option>Пиво</option>
    </optgroup>
</select>
 
<button type="submit">Поиск</button>
</form>

@ft4l · 12.11.2025, 08:15

Сообщение от serauto79

чтобы визуально было как на скриншоте

Слегка похоже если все border от контролов попрятать
... но если с ex масштабировать на уменьшение текста... то начинает вылазить "галочка" от select

И много букв,) и не слишком похоже и меняя html ... надо ещё больше букв

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<style>
    .deletion-search-bar {
        display: inline-block;
        padding: 1.6ex;
        background: #FFF;
        * {
            display: inline-block;
            font: 400 13pt sans-serif;
            background: #FFF;
        }
        .x {
            border: solid .5ex #FFF;
            border-radius: 5pt;
            box-shadow: 0 1pt 1ex 0 #777;
            overflow: hidden;
        }
        select, input {
            margin: -1ex;
            padding: 1ex;
        }
        button[type="submit"] {
            padding: .6ex 1.2ex;
            margin: -.6ex;
            background: #D11;
            color: #FFF;
            border-radius: 4pt;
            border: 0;
            box-shadow: 0 0 2pt 0 #000;
            position: relative;
            top: -1ex;
        }
    }
 
</style>
<form action="poisk.php" method="get">
<div class="deletion-search-bar">
<span class="x">
    <select id="category" name="category" placeholder="выбрать...">
        <option value="" hidden disabled selected>выбрать...</option>
        <optgroup label="Еда">
          <option selected="1">Пицца</option>
          <option>Суши</option>
        </optgroup>
        <optgroup label="Напитки">
          <option>Кола</option>
          <option>Пиво</option>
        </optgroup>
    </select>
    <input class="typeahead" type="text" name="location" data-provide="typeahead" id="mySearchInput" placeholder="Москва">
</span>
<button type="submit">☌</button>
<button type="reset">❎</button>
</div>
</form>

и кнопка похоже на svg-картинку ... не нашёл чего-то такой символ

@serauto79 · 12.11.2025, 12:46 **[ТС]**

Сообщение от ft4l

и кнопка похоже на svg-картинку ... не нашёл чего-то такой символ

Спасибо за внимание, да там картинка, но мне сами поля инпут и селект нужно в такой вид привести как на фото

@voral · 13.11.2025, 09:03

Вот такой вариант получился. Кнопка очистки появляется когда введен город. Если я правильно понял исходный листинг - очищать необходимо именно поле города. Если нужно все - достаточно поставить type="reset".

Так же из примечаний. Поле select очень не гибкое в плане стилизации по этому в очень часто на проектах его совсем заменяют (скриптом создают альтернативу)

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<style>
    :root {
        --radius: 4px;
        --height: 36px;
        --input-height: 20px;
    }
 
    .search {
        display: flex;
        background: #fff;
        gap: 0;
        align-items: center;
        height: var(--height);
        box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.2);
        width: 350px;
        border: none;
        position: relative;
        border-radius: var(--radius);
    }
 
    .search__submit {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        aspect-ratio: 1/1;
        box-sizing: border-box;
        font-size: 28px;
        border: none;
        border-radius: var(--radius);
        background: red;
        color: #fff;
        transform: rotate(90deg);
        cursor: pointer;
    }
 
    .search__clear {
        border: none;
        width: var(--input-height);
        height: var(--input-height);
        line-height: var(--input-height);
        background: transparent;
        color: #aaa;
        cursor: pointer;
        font-size: 20px;
        text-align: center;
        display: flex;
        justify-content: center;
        pointer-events: none;
        opacity: 0;
    }
 
    input:not(:placeholder-shown) + .search__clear {
        opacity: 1;
        pointer-events: auto;
    }
 
    .search__dropdown, .search__input {
        width: calc((100% - var(--height) - 30px) / 2);
        box-sizing: border-box;
        padding: 0 8px;
        border: none;
        background: transparent;
        height: var(--input-height);
        outline: none;
    }
 
    .search__dropdown {
        width: calc(50% - var(--height) / 2);
    }
 
    .search__input {
        width: calc(50% - var(--height) / 2 - var(--input-height));
        border-left: 1px solid #cecece;
    }
</style>
<form action="poisk.php" method="get">
    <div class="search">
        <select id="category" name="category" placeholder="выбрать..." class="search__dropdown">
            <option value="" hidden disabled selected>выбрать...</option>
            <optgroup label="Еда">
                <option>Пицца</option>
                <option>Суши</option>
            </optgroup>
            <optgroup label="Напитки">
                <option>Кола</option>
                <option>Пиво</option>
            </optgroup>
        </select>
        <input class="typeahead search__input" type="text" name="location" data-provide="typeahead" id="mySearchInput"
               placeholder="Город..." value="">
        <button class="search__clear" type="button">&times;</button>
        <button type="submit" class="search__submit">☌</button>
    </div>
</form>

@serauto79 · 13.11.2025, 15:06 **[ТС]**

Сообщение от voral

Так же из примечаний. Поле select очень не гибкое в плане стилизации по этому в очень часто на проектах его совсем заменяют (скриптом создают альтернативу)

У меня уже были вот такие стили, пробовал ваши стили добавлять не работает, если бы ваши стили как-то интегрировать уже в мои чтобы не было конфликтов

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<style>
/*! css стили которые отвечают за очистку поисковой формы */
.deletion-search-bar {
  position: relative;
  display: inline-block;
}
.clear-button {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #999;
}
.clear-button:hover {
  color: #333;
}
 
 
 
/*! css стили которые отвечают за выпадающий список городов */
.typeahead.dropdown-menu {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #aaa;
}
 
 
/*! css стили которые отвечают за выпадающий список разделов в поисковой строке */
    select {
      appearance: base-select;
      color: #666;
      background-color: transparent;
      font-size: 1.5rem;
      width: 10em;
      padding: 0.2em 0.2em;
      border: 1px solid #aaa;
      cursor: pointer;
    }
 
    select::picker(select) {
      appearance: base-select;
      height: 10em;
      border: 1px solid #aaa;
      margin-top: 0.1em;
      cursor: default;
    }
 
 
</style>
 
 
 
<form action="poisk.php" method="get">
 
<div class="deletion-search-bar">
<input class="typeahead" type="text" name="location" data-provide="typeahead" id="mySearchInput" placeholder="Поиск по городу..." value="Москва">
<span id="clearButton" class="clear-button">&times;</span>
</div>
 
<select id="category" name="category" placeholder="выбрать...">
    <option value="" hidden disabled selected>выбрать...</option>
    <optgroup label="Еда">
      <option>Пицца</option>
      <option>Суши</option>
    </optgroup>
    <optgroup label="Напитки">
      <option>Кола</option>
      <option>Пиво</option>
    </optgroup>
</select>
 
<button type="submit">Поиск</button>
</form>

@serauto79 · 13.11.2025, 21:59 **[ТС]**

Сообщение от voral

Так же из примечаний. Поле select очень не гибкое в плане стилизации по этому в очень часто на проектах его совсем заменяют (скриптом создают альтернативу)

Cпасибо, вроде подошло, за исключение того что в в поле инпут теперь не работает скрипт очистки введенного города

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
 
 
<style>
 
 
    :root {
        --radius: 4px;
        --height: 36px;
        --input-height: 20px;
    }
 
    .search {
        display: flex;
        background: #fff;
        gap: 0;
        align-items: center;
        height: var(--height);
        box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.2);
        width: 350px;
        border: none;
        position: relative;
        border-radius: var(--radius);
    }
 
    .search__submit {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        aspect-ratio: 1/1;
        box-sizing: border-box;
        font-size: 28px;
        border: none;
        border-radius: var(--radius);
        background: red;
        color: #fff;
        transform: rotate(90deg);
        cursor: pointer;
    }
 
    .search__clear {
        border: none;
        width: var(--input-height);
        height: var(--input-height);
        line-height: var(--input-height);
        background: transparent;
        color: #aaa;
        cursor: pointer;
        font-size: 20px;
        text-align: center;
        display: flex;
        justify-content: center;
        pointer-events: none;
        opacity: 0;
    }
 
    input:not(:placeholder-shown) + .search__clear {
        opacity: 1;
        pointer-events: auto;
    }
 
    .search__dropdown, .search__input {
        width: calc((100% - var(--height) - 30px) / 2);
        box-sizing: border-box;
        padding: 0 8px;
        border: none;
        background: transparent;
        height: var(--input-height);
        outline: none;
    }
 
    .search__dropdown {
        width: calc(50% - var(--height) / 2);
    }
 
    .search__input {
        width: calc(50% - var(--height) / 2 - var(--input-height));
        border-left: 1px solid #cecece;
    }
 
 
 
 
 
/*! css стили которые отвечают за выпадающий список городов */
.typeahead.dropdown-menu {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #aaa;
}
 
 
 
 
 
 
/*! css стили которые отвечают за выпадающий список разделов в поисковой строке */
    select {
      appearance: base-select;
      color: #666;
      background-color: transparent;
      font-size: 1.5rem;
      width: 10em;
      padding: 0.2em 0.2em;
      cursor: pointer;
    }
 
    select::picker(select) {
      appearance: base-select;
      height: 10em;
      border: 1px solid #aaa;
      margin-top: 0.1em;
      cursor: default;
    }
 
 
</style>
 
 
</head>
<body>
 
 
 
 
 
<form action="poisk.php" method="get">
 
<div class="search">
 
<select id="category" name="category" placeholder="Select section..." class="search__dropdown">
    <option value="" hidden disabled selected>Select section...</option>
    <optgroup label="Еда">
          <option>Пицца</option>
          <option>Суши</option>
        </optgroup>
        <optgroup label="Напитки">
          <option>Кола</option>
          <option>Пиво</option>
        </optgroup>
</select>
 
<input class="typeahead search__input" type="text" name="location" data-provide="typeahead" id="mySearchInput" placeholder="Город..." value="Москва">
 
<button type="button" class="search__clear" id="clearButton">&times;</button>
<button type="submit" class="search__submit">?</button>
 
 
</div>
</form>
 
 
 
 
 
<script>
 
// Скрипт для select в поисковом меню
    const sel = document.querySelector('select');
    sel.addEventListener('click', (ev) => {
      if (!ev.target.closest('option')) {
        sel.options[0].selected = true;
        sel.querySelector('optgroup').scrollIntoView(true);
      }
    });
// ******************************************************
 
 
 
 
 
// Очистка текста в поисковом поле в виде крестика
const searchInput = document.getElementById('mySearchInput');
const clearButton = document.getElementById('clearButton');
 
// Показываем кнопку, если поле не пустое
searchInput.addEventListener('input', () => {
  if (searchInput.value) {
    clearButton.style.display = 'block';
  } else {
    clearButton.style.display = 'none';
  }
});
 
</script>
 
 
 
 
</body>
</html>

Добавлено через 49 секунд
гляньте пожалуйста что не так!

Добавлено через 11 минут
Очистил кеш браузера вроде сейчас крестик очистки города работает, но крестик не добавляется в поле когда в ввожу в поле инпут например мос

мне плагин
bootstrap-3-typeahead

подсвечивает в выпадающем списке
москва

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

Добавлено через 1 минуту
Также подскажите как сменить цвет разделов в селекте при наведении сейчас они серого цвета когда на них навести

<option>Кола</option>

@serauto79 · 15.11.2025, 12:02 **[ТС]**

Сообщение от voral

Так же из примечаний. Поле select очень не гибкое в плане стилизации по этому в очень часто на проектах его совсем заменяют (скриптом создают альтернативу)

Подскажите как мне стилизовать в селект
<option> пункты меню, сейчас когда навожу они серого цвета, как сменить цвет. также как сделать чтобы и с мобильного тоже одинаково выглядело?

@voral · 15.11.2025, 12:09

Так а в чем проблема? точно так же как для любого элемента описываете стили для option. (правда есть ограничения). Однако для полной кроссбраузерности и управляемости стилями можно написать или взять готовый js скрипт. Искать по "styled select"

@serauto79 · 15.11.2025, 21:36 **[ТС]**

Сообщение от voral

Так а в чем проблема? точно так же как для любого элемента описываете стили для option.

Так то оно так, для пк-браузеров работают стили

HTML5
1
2
3
4
5
select option:hover {
      color: #FFFFE0;
      background-color: #008000;
      cursor: pointer;
    }

тут вопросов нет, а вот на мобильном, там никак совсем, может вы знаете решение для моб-браузеров?
Спасибо!

@voraa · 16.11.2025, 11:06

Сообщение от serauto79

а вот на мобильном, там никак совсем,

А что по вашему может быть hover на мобильном? Какое действие выполнить, что бы сработал?

@serauto79 · 16.11.2025, 12:09 **[ТС]**

Сообщение от voraa

А что по вашему может быть hover на мобильном? Какое действие выполнить, что бы сработал?

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

@ft4l · 17.11.2025, 00:08

Сообщение от serauto79

стилизовать селект список для мобильного

для мобильного не скажу ... для ПК-шного немного работает и без :hover, если потестить например такое

CSS
1
2
3
4
5
6
7
select { background: #000; color:#EEE;  } /* cхлопнутое и optgroup и :*** и если не делать для них */
 
select option:focus { background: #008; color:#EEE; }/* перекрашивает все следующие, по наведению */
 
select option:enabled { background: #080; color:#EEE; } /* обычные */
select option:checked { background: #700; color:#EEC; } /* только выбранные*/
select option:disabled { background: #777; color:#FFF; } /* только disabled */

Насчёт размеров и прочего ... возможно что никак ,))
как-будто в хромиум вообще игнорирует всякое white-space: ... max-width: ... width: .... для всего что "выпадает" всё растягивает в одну строку

@voraa · 17.11.2025, 07:41

Сейчас есть много возможностей стилизации select. Правда там все непросто, надо изучать. Все современные (последних версий) браузеры вроде поддерживают.
https://developer.mozilla.org/... ble_select

Хотя, посмотрел сейчас на iOs - в целом работает, но стилизуется не все. На Андроид все нормально.

Новые блоги и статьи Все статьи Все блоги /
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .	Фото: Daniel Greenwood kumehtar 13.11.2025	Расскажи мне о Мире, бродяга kumehtar 12.11.2025 — Расскажи мне о Мире, бродяга, Ты же видел моря и метели. Как сменялись короны и стяги, Как эпохи стрелою летели. - Этот мир — это крылья и горы, Снег и пламя, любовь и тревоги, И бескрайние. . .

Поисковая форма (поисковое поле = выпадающий список)

Решение

Решение

@serauto79 21 / 10 / 4 Регистрация: 02.04.2015 Сообщений: 779

	Поисковая форма (поисковое поле = выпадающий список) 11.11.2025, 23:16. Показов 767. Ответов 13 Метки нет (Все метки) Доброго времени суток! Подскажите как лучше реализовать верстку поискового поля input + выпадающий список select Нужно чтобы визуально было как на скриншоте что прикрипил Поле там где город МОСКВА, это input А выпадающий список с категории где ПИЦЦА это select Нужно чтобы визуально выглядело так, может есть у кого готовые примеры или может гдето видели пример реализации такой? Миниатюры 0

@voral 3011 / 1444 / 262 Регистрация: 16.03.2008 Сообщений: 6,441 Записей в блоге: 2
	15.11.2025, 12:09
	Так а в чем проблема? точно так же как для любого элемента описываете стили для option. (правда есть ограничения). Однако для полной кроссбраузерности и управляемости стилями можно написать или взять готовый js скрипт. Искать по "styled select" 0

@voraa 1219 / 1103 / 173 Регистрация: 21.01.2024 Сообщений: 5,022
	17.11.2025, 07:41
	Сейчас есть много возможностей стилизации select. Правда там все непросто, надо изучать. Все современные (последних версий) браузеры вроде поддерживают. https://developer.mozilla.org/... ble_select Хотя, посмотрел сейчас на iOs - в целом работает, но стилизуется не все. На Андроид все нормально. 0