Select 박스에 아래 화살표 달기

<ol class="m_service_list">
	<li>
      <select id="select-iframe" onchange='showSelectedValue()'>
		<option value="" target="best">경보제약</option>
		<option value="" target="best">넷마블</option>
	</select>
   </li>
</ol>

크로스 브라우징 문제로 인해(safari에서는 up-down 화살표라고 함..)안드로이드,크롬은 잘 되는데 ㅠㅠ
select박스에 아래 화살표 달아야함.. 부모:after을 이용해야 되는데 어떻게 할까 고민하다가
select를 <ol><li>로 감싸기로 했음

[CSS]
* 네이티브 스타일 없애기
	.m_menu_select, #select-iframe{
       /****select박스 기본 스타일 지우기****/
       /* 운영체제 및 브라우저에 기본적으로 설정되어 있는 테마를 기반으로 요소를 표현 */
       appearance : none;           
       /*chrome, safari*/
       -webkit-appearance:none;    
       /*firefox*/   
       -moz-appearance: none;
       
       width:100%;
       background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
       text-align:center;
   }
   
   * 서버 화살표 모양 
   .m_service_list::after{
       content: '\25BC'; 	//유니코드로 화살표 모양
       position: absolute;
       top: 0;
       right: 0;
       bottom: 0;
       font-size: 13px;
       
       color: black;
       padding: 0px 3px 0px 0px;
       pointer-events: none;

       top: 50%; /* 요소의 상단을 중앙으로 이동 */
       transform: translateY(-50%); /* 요소의 반만큼 위로 이동 */
   }