мне нужно изменить стандартную стрелку select, что бы она была похожа на что-то такое.
Был бы благодарен за помощь.
var month = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май','Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'];
for (var i = 0; i < 12; i++) {
var option = document.createElement("option");
option.value = i;
option.text = month[i];
monthList.appendChild(option);
}
for (var i = 1940; i < 2100; i++) {
var option = document.createElement("option");
option.value = i;
option.text = i;
yearList.appendChild(option);
}
#monthList{
border: 1px solid #CAD3D9;
width: 128px;
height: 28px;
border-radius: 4px;
font:normal normal 14px 'Open Sans',Arial,sans-serif;
padding-left: 5px;
margin-right: 5px;
appearance: none;
}
#yearList{
border: 1px solid #CAD3D9;
width: 75px;
height: 28px;
border-radius: 4px;
font:normal normal 14px 'Open Sans',Arial,sans-serif;
padding-left: 5px;
}
#headDiv {
border: 1px solid #E9EBED;
width: 280px;
background: #E9EBED;
height: 60px;
border-radius: 4px 4px 0 0;
font:normal normal 14px 'Open Sans',Arial,sans-serif;
box-shadow: 0 14px 14px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
display: flex;
justify-content: center;
align-items: center;
}
<div id = "headDiv">
<select id = "monthList" onchange="changeTable(yearList.value, monthList.value)"></select>
<select id = "yearList" onchange="changeTable(yearList.value, monthList.value)"></select>
</div>