Custom select arrow using background image – HTML/CSS

Puneet Sharma

5 years ago

Here is how you can add a custom arrow to a “select” HTML tag by simply adding a ‘background-image’ and ‘appearance: none’ with CSS.

DEMO

Open demo in a full window – https://demos.webdevpuneet.com/set1/custom-select-arrow/index.html

HTML

<select class="customSelect">
	<option selected>Featured</option>
	<option value="1">Latest</option>
</select>

CSS

.customSelect{
	border:1px solid #cecece;
	background: #ffffff url('https://i2.wp.com/webdevpuneet.com/wp-content/uploads/2020/04/select-bg.png') no-repeat top right;
	width: 205px;
	font-size: 14px;
	color: #545452;
	height: 25px;
	border-radius: 7.5px;
	padding-left: 5px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}