Стилизации select в css крайне сильно ограничены. Но очень часто в дизайн стандартный select

Как видите, тега select тут и близко нет. Теперь мы можем как угодно стилизовать наш собственный select с помощью CSS:

.select {
  background-color: #0ee;
  border-radius: 10px;
  padding: 10px 0;
  width: 200px;
}
.select p {
  cursor: pointer;
  margin: 0;
  padding: 5px 20px;
}
.select p.active {
  background-color: #ee0;
}

Безусловно, Вы здесь можете сделать всё, что пожелаете. И, наконец, надо превратить внешний вид в функциональность select, то есть выбор и подстветка только одного элемента из нескольких, а также последующая отправка вместе с формой. Для этого мы воспользуемся JavaScript:

function select(element) {
  var value = element.getAttribute("data-value"); // Считываем значение выбранного элемента
  var nodes = element.parentNode.childNodes; // Получаем все остальные элементы
  for (var i = 0; i < nodes.length; i++) {
    /* Отфильтровываем посторонние элементы text и input */
    if (nodes[i] instanceof HTMLParagraphElement) {
      /* Добавляем active у выбранного элемента, стирая данный класс у всех остальных */
      if (value == nodes[i].getAttribute("data-value")) nodes[i].className = "active";
      else nodes[i].className = "";
    }
  }
  document.getElementById("my_select").value = value; // Устанавливаем в hidden-поле выбранное значение
}

Ключевым моментом реализации функциональности select является hidden-поле, в которое записывается значение из нашего select. И именно это значение будет отправлено при отправке формы.

Вот таким нехитрым образом делается абсолютно любая стилизация select на JavaScript. Если использовать jQuery, то код будет ещё проще.

Безусловно, стандартный select обладает большей функциональностью. Например, он реагирует на tab, также можно в нём перебирать элементы стрелками на клавиатуре. Но всё это Вы так же можете реализовать при необходимости на JavaScript.