Style a select dropdown arrow

Adding a custom arrow to the native <select> dropdown

How to customize the dropdown arrow in an HTML <select> tag?

Unfortunately, the design of the dropdown arrow in a <select> tag is not easily customizable. The appearance of form elements, including the dropdown arrow, is generally under the control of the browser's default styling to ensure consistency across websites.

Nevertheless, there are certain tricks and techniques available to attain a specific level of customization.
You can use CSS pseudo-elements like ::after to create a custom arrow. It's important to note that these approaches may not consistently work across all browsers, and some methods could be deemed as unconventional or hacky.

In this blog, I will show you how to add a custom dropdown in select tag using only HTML and CSS.

Normal Select Tag Style


Custom Select Tag Style




You can use the following code as an example to achieve a custom dropdown style for a select tag using HTML and CSS.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- CSS -->
<style>
.customSelect {
    position: relative;
    float: left;
    min-width: 200px;
    background-color:blue;
}

.customSelect::after {
    content: '\f078'; /*you can also add custom image url here*/
    font: normal normal normal 14px/1 FontAwesome;
    right: 0;
    top: 5px;
    height: 34px;
    padding: 15px 25px 0px 8px;
    position: absolute;
    pointer-events: none;
    background-color:#cbed69;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    padding: 8px 15px;
    display: flex;
    align-items: center;
}
/* IE11 hide native button */
select::-ms-expand {
    display: none;
}

.customSelect select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  max-width: 320px;
  height: 50px;
  float: right;
  margin: 5px 0px;
  padding: 0px 24px;
  font-size: 16px;
  line-height: 1.75;
  color: #333;
  background-color: #ffffff;
  background-image: none;
  border: none;
  border-radius: 50px;
  outline: none;
  -ms-word-break: normal;
  word-break: normal;
}
</style>

<!-- HTML -->
<div class="customSelect">
  <select>
      <option selected>Custom Selection</option>
      <option>Buggerspot</option>
      <option>Buggerspot.com</option>
  </select>
</div>

This code creates a custom dropdown style by hiding the default arrow and adding a custom arrow using CSS. Feel free to adjust the styles, sizes, and other properties to match your desired design.

Thank You!