I need to change the standard select arrow so that it looks like something. enter image description here

I would be grateful for the help.

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>

    1 answer 1

    Using css you can remove the standard arrow on the main browsers and set the necessary one through the background .

     *:focus{ outline:none; } *{ box-sizing:border-box; } select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding:5px 30px 5px 10px; background: url(https://www.shareicon.net/download/2015/11/10/669927_arrows_512x512.png) no-repeat right 5px center / 11px auto; border:1px solid gray; } select::-ms-expand { display: none; } 
     <select> <option>asd1</option> <option>asd2</option> <option>asd3</option> </select>