Как добавить изображение в элемент <select> в виде иконки или картинки, используя формат SVG?

Question

Lucy

css

Как добавить изображение в элемент <select> в виде иконки или картинки, используя формат SVG?

Как можно добавить иконку или изображение вместе с текстом в элемент `option` в `select`, используя формат SVG?

2 августа 2024 г. 13:13

Ответы на вопрос 1

Похожие вопросы

Answer 1

Для добавления изображения в элемент `select` в виде иконки или картинки с помощью формата SVG, можно воспользоваться следующим подходом:

1. Создайте SVG-файл с вашей иконкой или изображением.
2. Вставьте SVG-код прямо внутрь элемента `option`.

Пример:

```html
<select>
  <option value="1" data-icon="<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'><path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4 13h-8v-2h8v2zm0-4h-8V9h8v2z'/></svg>">Option 1</option>
  <option value="2" data-icon="<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'><path d='M22 6l-8 8-4-4-8 8 2 2 6-6 4 4 10-10z'/></svg>">Option 2</option>
  <option value="3" data-icon="<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'><path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l8.73 4.98L12 16.5z'/></svg>">Option 3</option>
</select>
```

В данном примере каждая `option` содержит атрибут `data-icon`, в котором указан SVG-код иконки. При выборе опции из выпадающего списка, будет отображаться как текст, так и соответствующая иконка.

Необходимо учитывать, что не все браузеры могут корректно отображать SVG внутри элементов `option`, поэтому перед использованием данного метода стоит протестировать его совместимость с вашими целевыми браузерами.