4 Steps Simple Custom Dropdown Arrow With Pure CSS

Welcome to a tutorial on how to create a custom dropdown arrow using pure CSS and HTML. Yes, we can pretty much do any customization with modern HTML and CSS. But strangely, there is no straightforward way to customize a dropdown arrow in pure CSS.

That covers the basic mechanics, but let us walk through a detailed example in this guide – Read on!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

QUICK SLIDES

 

 

TABLE OF CONTENTS

Download & Demo	Custom Dropdown	Useful Bits & Links
Tutorial Video	The End

 

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

THE DEMO

 

 

 

PART 1) WRAP THE SELECT BOX

<div class="cselect"><select>
  <option>Good Boy Doge</option>
  <option>Evil Cate</option>
  <option>Sneezing Panda</option>
  <option>Confession Bear</option>
  <option>Fabulous Llama</option>
</select></div>

No sweat. All we need in the HTML is to wrap a normal <select> within a <div> wrapper.

 

 

PART 2) CUSTOM HTML SYMBOL DROPDOWN ARROW 

/* (A) BASIC CUSTOM DROPDOWN MECHANICS */
/* (A1) HIDE DEFAULT ARROW */
.cselect select { appearance: none; }

/* (A2) DEFINE OUR OWN CUSTOM ARROW */
.cselect::after { content: "\25b6"; }

/* (A3) POSITION CUSTOM ARROW */
.cselect { position: relative; }
.cselect::after {
  position: absolute;
  top: 0; right: 0;
}

Now, here comes the irritating part – CSS does not have a direct property to set the dropdown arrow, we have to do it through “alternative means”.

• (A1) Hide the default dropdown arrow using appearance: none.
• (A2) Attach an HTML symbol to .cselect::after to build our own custom arrow.
• (A3) Position the custom dropdown arrow.

 

PART 3) CUSTOM DROPDOWN BOX DIMENSIONS

/* (B) DIMENSTIONS */
/* (B1) MAKE <SELECT> FILL THE WRAPPER */
.cselect select { width: 100%; }
.cselect { max-width: 400px; } /* OPTIONAL */

/* (B2) ALL SAME HEIGHT */
.cselect, .cselect::after, .cselect select {
  box-sizing: border-box;
  height: 40px;
}

/* (B3) A SQUARE CUSTOM ARROW BOX */
/* ADD BORDER-RADIUS: 50% TO TURN IT CIRCLE */
.cselect::after { width: 40px; }

Next, we fix a funky-looking custom dropdown box by setting the dimensions.

• (B1) Make the <select> fill up the <div> wrapper.
• (B2) “Standardize” the height of all the <div> <select> <div>::after.
• (B3) Finally, turn the dropdown arrow into a square (same width and height).

 

 

PART 4) COSMETICS

/* (C) COSMETICS */
/* (C1) OVERRIDE DEFAULT SELECT BOX STYLES */
.cselect select {
  border: 1px solid #ccc;
  background: #fafafa;
  padding: 5px 10px;
}

/* (C2) DROPDOWN ARROW BOX */
.cselect::after {
  /* COLORS */
  color: #fff;
  background: #cfdcff;
  /* CENTER ARROW IN BOX */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* (C3) FUNKY ANIMATIONS */
.cselect::after { transition: all 0.3s; }
.cselect:hover::after {
  transform: rotate(90deg);
  background: #274396;
  color: #fff;
}

/* (C4) REMOVE DEFAULT HIGHLIGHTS */
.cselect select:active,
.cselect select:focus,
.cselect select:hover {
  outline: none;
}

No need to panic, this final part is just the cosmetics – Font, color, borders, etc… Feel free to customize this to your own liking.

 

 

EXTRA) ARROW ON THE LEFT SIDE

/* (D) ARROW ON LEFT SIDE */
.left.cselect select { padding-left: 50px; }
.left.cselect::after {
  right: auto;
  left: 0;
  border-radius: 50%;
}

Easy. Just set .cselect::after to left: 0.

 

 

A SMALL LIMITATION

Just a small note – The custom dropdown arrow is purely “cosmetic”. Clicking on it will not trigger focus on the select list.

 

CAN WE CUSTOMIZE THE DROPDOWN ITEMS!?

No, not directly. Every browser renders the <select> differently – On a desktop, the selectable list will be below the box. But on mobile, it will probably become a popup selection list instead. The only way to do it is to make your own “entirely customized selectable list made from scratch”.

 

LINKS & REFERENCES

• HTML Symbols – Toptal
• Example on CodePen – Custom Dropdown Arrow With Pure CSS

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEAT SHEET