HTML select dropdown custom arrow css

Question

I am trying to use a custom arrow for a dropdown menu as mentioned in the code. I am facing two issues here.

1.unable to place the arrow section adjacent to the dropdwon.

2.This custom arrow is not clickable.

How can I achieve these two ?

I tried to use z-index;-1 for the :after section. But its not working as expected.

 .expenses_div { width:90% !important; margin:auto; margin-top:2%; } .expenses_div_left{ height:40px; line-height:40px; background-color:black; float:left; display: inline-block; text-align:left; padding-left:12px; color:white; width:48%; font-size: 14px !important; font-family : "Montserrat",sans-serif !important; } .expenses_div_right{ height: 40px !important; line-height: 40px !important; width:48%; float:left; display: inline-block; cursor:pointer; background:transparent !important; } .expenses_div_right select { font-family : "Montserrat",sans-serif !important; background:transparent !important; appearance:none !important; -moz-appearance:none !important; -webkit-appearance:none !important; -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important; border: 1px solid black !important; width:100%!important; color:black !important; height:40px; text-align:left !important; font-size: 14px !important; outline: none; background-color:none !important; position: relative !important; cursor:pointer; padding-left:12px; } .expenses_div_right:after { content: '< >'; font: 16px "Consolas", monospace; font-weight:bold; color: white; background-color:black; display:inline-block; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); position: relative; width:40px; height:40px; text-align:center; line-height:40px; overflow:hidden !important; cursor:pointer; } 

 <div class="expenses_div"> <div class="expenses_div_left" >How to Proceed</div> <div class="expenses_div_right" > <select name="main_selection" id="main_selection" > <option selected value="">Select an option</option> <option value="new_data">New Data</option> <option value="analize_data">Analyze Data</option> <option value="refresh_data">Refresh Data</option> </select> </div> </div> 

Answer 1

Position And Click !

Changes commented :

Snippet :

 .expenses_div { width:90% !important; margin:auto; margin-top:2%; } .expenses_div_left{ height:40px; line-height:40px; background-color:black; float:left; display: inline-block; text-align:left; padding-left:12px; color:white; width:48%; font-size: 14px !important; font-family : "Montserrat",sans-serif !important; } .expenses_div_right{ height: 40px !important; line-height: 40px !important; width:48%; float:left; display: inline-block; cursor:pointer; background:transparent !important; position:relative;/*Added (Because :after should be relative to this not whole page! )*/ } .expenses_div_right select { font-family : "Montserrat",sans-serif !important; background:transparent !important; appearance:none !important; -moz-appearance:none !important; -webkit-appearance:none !important; -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important; border: 1px solid black !important; width:100%!important; color:black !important; height:40px; text-align:left !important; font-size: 14px !important; outline: none; background-color:none !important; position: relative !important; cursor:pointer; padding-left:12px; } .expenses_div_right:after { content: '< >'; font: 16px "Consolas", monospace; font-weight:bold; color: white; background-color:black; display:inline-block; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); position: absolute;/*Changed to absolute*/ top:0;/*Added*/ right:0;/*Added*/ width:40px; height:40px; text-align:center; line-height:40px; overflow:hidden !important; cursor:pointer; z-index :-1 ;/*Added ( For Your 2nd Question )*/ } 

 <div class="expenses_div"> <div class="expenses_div_left" >How to Proceed</div> <div class="expenses_div_right" > <select name="main_selection" id="main_selection" > <option selected value="">Select an option</option> <option value="new_data">New Data</option> <option value="analize_data">Analyze Data</option> <option value="refresh_data">Refresh Data</option> </select> </div> </div> 

I hole this helps you !