Как вставить картинку в option?

Question

[DevilPrado]

есть datalist со списком стран, нужно к каждой стране добавить ее флаг.
ВАриант с jquery не прокатит, поскольку сайт на конструкторе написан, и от тех поддержки ответа миллион лет ждать.
есть ли какой то способ? через background тоже вроде как не катит.
Для примера в первом option есть ссылка на флаг страны(Знаю что не тот флаг, но просто пока тестил вставил).
Знаю, что option забивает на большинство стилистических решений и вложенные теги. Поэтому и не работает текущий вариант

<datalist id="cities">
            <option value="+380"><img src="https://ic.wampi.ru/2021/03/01/ad.png" alt="ad.png"/> Ukraine (Україна) </option>
            <option value="+7" class="russia"> Russia (Россия)</option>
            <option value="+375"> Belarus (Беларусь)</option>
            <option value="+7"> Kazakhstan (Казахстан)</option>
 </datalist>

Comments

[Rsa97]

По стандарту элемент <option> может содержать только текст. Так что только имитация select'а.

[DevilPrado]

Rsa97, Читайте внимательнее, datalist, а не select

[Fedor Vlasenko]

через background тоже вроде как не катит

именно так, вы на правильном пути, добавляйте классы стран и задавайте background им

[Rsa97]

DevilPrado, https://www.w3.org/TR/html52/sec-forms.html#the-op...

Content model:
- If the element has a label attribute and a value attribute: Nothing.
- If the element has a label attribute but no value attribute: Text.
- If the element has no label attribute: and is not a child of a datalist element: Text that is not inter-element white space.
- If the element has no label attribute and is a child of a datalist element: Text.

[Rustam Bainazarov]

DevilPrado, только с помощью самописных решений или JS-библиотек.

[strelok011]

Помимо отсутствия стилизации стоит обратить внимание, что datalist имеет баги в файрфоксе при включенном автозаполнении
https://caniuse.com/datalist