HTML選擇下拉菜單自定義箭頭CSS

Question

我正在嘗試將自定義箭頭用於代碼中提到的下拉菜單。 我在這里面臨兩個問題。

1.無法將箭頭部分放置在投幣車附近。

2.此自定義箭頭不可單擊。

如何實現這兩個目標？

我試圖對:after部分使用z-index;-1 。 但是它沒有按預期工作。

 .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

定位並單擊！

更改評論：

片段：

 .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> 

我孔這對您有幫助！