Простая кастомизация кнопки Select на CSS без использования JavaScript

Мне понадобилось сделать кастомную кнопку выпадающего списка. Поиск выдал несколько вариантов тут1, тут2 и тут3. Но хотелось более простого решения.

Расписываю структуру. Для кнопки буду использовать иконку из шрифта Material Icons.

HTML:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
<div class="dropdown">
  <select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <i class="material-icons">keyboard_arrow_down</i>
</div>

В CSS за границы и кнопку выпадающего списка отвечает 'appearance'. Что бы стилизовать самим, дефолтные значения нам ни к чему, выставляем appearance: none; для всех браузеров.

Осталось стилизовать div, в который у нас завернут select, и добавить позиционирование.

.dropdown {
	position: relative;
	width: 100px;
  height: 34px;
	background: #FFFFFF;
	border: 1px solid black;
	border-radius: 4px;
}
option,
select {
	color: black;
	padding-left: 15px;
	padding-top: 5px;
  border: none;
}
.dropdown:focus,
.dropdown:hover {
	border: 1px solid red;
	color: black;
}
.dropdown select{
	appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
	width: 100px;
  height: 34px;
	background: none;
}
/* For IE <= 11 */
.dropdown select::-ms-expand {
   display: none;
}

.dropdown .material-icons {
	font-family: Material Icons;
	font-size: 24px;
	line-height: 24px;
	color: black;
	position: absolute;
	top: 5px;
	right: 10px;
	pointer-events: none; 
}

Ссылка на исходную статью здесь, где так же показаны дополнительные эффекты при наведении мышкой на список.

Готовый пример можно найти тут.