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>

Royal_MGH · Accepted Answer · 2019-05-26 04:48:23Z

2

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 !

edited May 26, 2019 at 4:48

answered May 26, 2019 at 4:40

Royal_MGH

8046 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

acr Over a year ago

Thanks. But when I add this code to my site, arrow is not showing up. arrow is positioned properly. verified that with removing the z-index. I believe there is something strange with background:transparent !important; property. its not working as expected

Royal_MGH Over a year ago

Happy to help ;) please send your website url or run it on js-fiddle to see whats wrong

Royal_MGH Over a year ago

add : z-index:2; to <select> and change z-index :after to z-index:1;that will work:)

Collectives™ on Stack Overflow

HTML select dropdown custom arrow css

1 Answer 1

Position And Click !

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Position And Click !

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related