Картинки в <select>.md

Пример: список стран с иконками флагов.

Сделать это чистым CSS не получается по ряду причин:

• option[value="..."]::before действует только при раскрытом списке, на сам же <select> - нет
• к <select> неприменимо ::before
• на <select> не действует [value=...], в т.ч. потому, что такое правило действует на основе исходного HTML-кода страницы, а не динамически при работе с полем

Несложное решение возможно с помощью jQuery.select2(). Используются параметры templateSelection и templateResult. Пример:

<select>
	<option data-country-flag="russia">Россия</option>
	<option data-country-flag="belarus">Беларусь</option>
	<option data-countryflag="kazakhstan">Казахстан</option>
</select>

var template = function(data) { // https://select2.org/selections#templating
	if (!data.element) // подавляем вызов для поля поиска 
		return null;   // (вызов происходит даже если поиск отключен)
	
	var country = data.text;
	var flag_name = data.element.dataset.countryflag;
	var option = $('<span class="has-countryflag">' + country + '</span>');
	if (flag_name) {		
		var src = '/css/img/icons/flag/' + flag_name + '.svg';
		option.css( 'background-image', 'url(' + src + ')' );
	}
	return option;
};

$('select').select2({
		minimumResultsForSearch: Infinity, // убираем текстовое поле поиска
		templateSelection: template,       // вид <select>
		templateResult:    template        // вид <option> в выпадающем списке
});