Hide Dropdown Arrow for Select Input with CSS appearance

css
Published on January 15, 2021

The dropdown arrow icon in <select> input can be hidden by setting the CSS appearance: none.

The CSS appearance property allows to suppress the native appearance of an element (which may vary with operating system), so that CSS can be used to restyle it.

select {
	appearance: none;
}

Example

<select id="dropdown">
	<option>Choose an option</option>
	<option value="1">Option 1</option>
	<option value="2">Option 2</option>
</select>

#dropdown {
	appearance: none;
	padding: 5px;
	background-color: #4834d4;
	color: white;
	border: none;
	font-family: inherit;
	outline: none;
}

Browser Compatibility

appearance: none is supported in all browsers.

In this Tutorial