HTML select 下拉自定义箭头 css

Question

我正在尝试使用自定义箭头作为代码中提到的下拉菜单。我在这里面临两个问题。

1.unable 将箭头部分放置在下拉列表旁边。

2.This 自定义箭头不可点击。

我怎样才能实现这两个目标？

我尝试将 z-index;-1 用于 :after 部分。但是它没有按预期工作。

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

这个对你有帮助！

HTML select 下拉自定义箭头 css

HTML select dropdown custom arrow css

html

css

html-select

drop-down-menu

定位并点击 !