Как выставить фото в select?

В стандартном HTML элемент select не предусмотрена возможность отображения изображений прямо в списке выбора. Однако, существуют различные способы, которые позволяют добиться подобного эффекта.

Один из самых популярных способов - использование библиотеки JavaScript, например Select2 или Selectize. Эти библиотеки предоставляют богатые возможности для кастомизации элементов выбора, включая отображение изображений.

Другой способ - это использование HTML и CSS. Можно создать свой собственный элемент списка, который будет содержать изображения и текст. Например, можно использовать элементы <ul> и <li> для создания списка с изображениями и текстом, а затем скрыть стандартный элемент select. При выборе одного из пунктов списка, можно передать соответствующее значение в скрытый select.

Третий способ - использование CSS и псевдоэлементов. Можно использовать атрибут data-image для определения изображения для каждого пункта списка, а затем с помощью CSS добавить изображения к элементам выбора.

Пример использования атрибута data-image:

<select>
    <option data-image="path/to/image1.jpg">Option 1</option>
    <option data-image="path/to/image2.jpg">Option 2</option>
</select>

Затем с помощью CSS можно добавить изображения к пунктам списка:

select option {
    padding-left: 20px;
    background-repeat: no-repeat;
    background-position: 0 50%;
}

select option[data-image="path/to/image1.jpg"] {
    background-image: url('path/to/image1.jpg');
}

select option[data-image="path/to/image2.jpg"] {
    background-image: url('path/to/image2.jpg');
}

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