Как сделать выпадающий список css?

• Создайте select с name.
• Добавьте option с value.
• Свяжите label через for и id.
• Оформите поле CSS.
• Проверьте клавиатуру и отправляемое значение.

Для выбора одного варианта в форме используйте настоящий select с option, а CSS оставьте для оформления. Базовый пример:

<label for="delivery">Доставка</label><select id="delivery" name="delivery"><option value="pickup">Самовывоз</option><option value="courier">Курьер</option></select>

Id связывает поле с подписью, а name определяет имя отправляемого значения. Значение выбранного option станет значением поля при обычной отправке формы. Если value у option не указать, браузер использует его текст, но явные технические значения удобнее для обработки.

Для оформления можно начать с select { font: inherit; padding: .6rem; border: 1px solid #777; border-radius: .4rem; max-width: 100%; }. Это меняет внешний вид контрола, сохраняя стандартное управление. Не отключайте обозначение фокуса: пользователь должен понимать, какое поле выбрано при переходе клавишей Tab.

Внешний вид раскрытого списка и возможности оформления option зависят от браузера и платформы. На телефоне выбор может открыться в системном интерфейсе. Это нормальное поведение, а не поломка CSS. Не ожидайте полного совпадения раскрытого списка на всех устройствах только от набора обычных свойств.

Если требуется точная сложная картинка с поиском, группами и нестандартными элементами, понадобится более специализированный компонент или поддерживаемые браузером новые способы оформления. Тогда отдельно проверяются клавиатура, фокус и доступное название. Для четырех вариантов доставки это обычно излишне. Ul со скрытыми ссылками решает навигационную задачу и сам по себе не становится полем формы: выбор и отправку пришлось бы реализовать дополнительно. Начните с select и проверьте реальные отправляемые значения.