zombtron

https://jsfiddle.net/x75zLn2a/
вот вам каркас. Стилизуйте и напичкайте данными.
Стилизоваться оно должно как угодно, ибо там обычные дивы.
Инпут скрытый я добавил для того, чтобы не колдовать с отправкой из формы - все по фен-шую, стандартный инпут с name и value.
Нейм у инпута - это нейм предполагаемого селекта, data-value у дивов - value у option.
Все свистелки вставляются в div.opt

Еще завтыкал сделать сворачивание при выборе и при клике вне селекта.
И нужно еще добавить позиционирование/размеры, чтобы при открытии оно накрывало то, что снизу, а не сдвигало.
Я думаю, понятно, что и как. Если нет, обращайтесь, подскажу.

upd:
https://jsfiddle.net/zombotron/gakqoz2t/3/
Добавил, что забыл + управление кнопками клавиатуры.
Конечно жестко велосипедно, зато без кучи зависимостей, что позволяет довольно шустренько работать на слабом ноуте.

+ есть небольшие костыли. Но я не претендую на универсальность решения. Это скорее просто алгоритм.

Типа так:

<div class="figure"></div>
<style>
.figure {
    width: 250px;
    height: 50px;
    background-color: orange;
    border-radius: 15px;
	position: relative;
}

.figure:before {
    content: '';
    width: 234px;
    height: 25px;
    background-color: orange;
    display: block;
    position: absolute;
    left: 8px;
    top: 35px;
    border-radius: 50%;
}
</style>

с размерами, пропорциями, градиентом и пр. свистоперделками разбирайтесь сами. )

Я думаю, что для "правильности" нужно руководствоваться тем, что загружать нужно только те шрифты, которые требуются и избегать ВОШ (вспышка обычного шрифта) - загружать шрифт перед блоком, в котором он используется и загружать синхронно.
А так, на ваше усмотрение и с учетом структуры/архитектуры страницы/приложения:
, @font-face{}, по прямому url, из localstorage, в виде base64.
По ходу, непосредственно в хтмл-коде - 100% гарантирует загрузку именно там, где прописано и именно в момент вызова. Но нужно учитывать размер таких кусков и то, что такой код выглядеть будет страшно. Но 1-2 шрифта загрузить можно...

Вот так работает, но с анимацией и при загрузке.
На css.
Как-то и этот косяк убирается., но мне лень думать как. )

.square{
    height: 100px;
    width: 100px;
    background: red;
    animation-fill-mode: forwards;
    animation-direction: alternate;
    animation: squareq linear 1s;

}
.square:hover{
    animation: square linear 1s;
}

@keyframes square {
  from {
    width: 100px;
    height: 100px;
  }
  25% {
    height: 100px;
    width: 200px;
  }
  50% {
    width: 200px;
    height: 200px;
  }
  75% {
    width: 200px;
    height: 100px;
  }
  to {
    width: 100px;
    height: 100px;
  }
}


@keyframes squareq {
  from {
    width: 100px;
    height: 100px;
  }
  25% {
    height: 100px;
    width: 200px;
  }
  50% {
    width: 200px;
    height: 200px;
  }
  75% {
    width: 200px;
    height: 100px;
  }
  to {
    width: 100px;
    height: 100px;
  }
}