Определите раскрывающийся список немного лучше ⇐ CSS

[Гость]

Сейчас раскрывающийся список сливается с фоном страницы.

HTML

Сборщик историй Выберите страну Очистить CSS

/* Стили для контейнера автозаполнения */ .автозаполнение { положение: относительное; отображение: встроенный блок; } /* Стили поля ввода */ ввод[тип="текст"] { ширина: 200 пикселей; отступ: 5 пикселей; граница: 1 пиксель, сплошная прозрачная; /* Устанавливаем начальную границу прозрачной */ переход: граница 0,3с; /* Добавляем переход для плавного эффекта */ } /* Добавляем границу только в том случае, если ввод не пуст */ input[type="text"]:not(:placeholder-shown) { граница: 1 пиксель, сплошная #ccc; /* Показывать границу, если она не пуста */ } /* Стили для раскрывающегося списка автозаполнения */ .autocomplete-items { положение: относительное; максимальная высота: 150 пикселей; переполнение-у: авто; тип стиля списка: нет; /* Удалить значок списка */ ширина: 200 пикселей; /* Соответствие ширине поля ввода */ граница: 1 пиксель, сплошная прозрачная; /* Устанавливаем начальную границу прозрачной */ } /* Стили для каждого элемента автозаполнения */ .autocomplete-item { отступ: 5 пикселей; курсор: указатель; } /* Выделяем выбранный элемент */ .autocomplete-item:hover { цвет фона: #f2f2f2; } /* Выделяем выбранный элемент */ .autocomplete-item.active { цвет фона: #ccc; /* Настраиваем цвет выделения */ } Как мне сделать так, чтобы оно не сливалось с остальными, чтобы я знал, где находится мой фон и раскрывающийся список. Может быть, создать красивую рамку или что-то в этом роде, но не знаю, как это сделать. Так что, если бы кто-нибудь мог опубликовать красивое решение этой проблемы, было бы здорово.