Custom Dropdown Arrow With Pure CSS (Simple Example)

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.

 

TLDR – QUICK SLIDES

[web_stories_embed url=”https://code-boxx.com/web-stories/customized-dropdown-arrow-with-css/” title=”Customized Dropdown Arrow With CSS” poster=”https://code-boxx.com/wp-content/uploads/2022/03/STORY-HTML-20230505.webp” width=”360″ height=”600″ align=”center”]

Fullscreen Mode – Click Here

 

 

TABLE OF CONTENTS

 

 

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) HTML – WRAP THE SELECT BOX

<div class="sel"><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 ARROW SYMBOL

/* (A) BASICS - HIDE DEFAULT + SHOW CUSTOM ARROW */
.sel select { appearance: none; }
.sel::after { content: "\25b6"; }
 
/* (B) DIMENSIONS */
/* (B1) WRAPPER - OPTIONAL */
.sel { max-width: 400px; margin: 10px; }
 
/* (B2) "EXPAND" SELECT BOX */
.sel select {
  width: 100%; padding: 10px;
  color: #333;
  border: 1px solid #cfcfcf;
}

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

• (A1) Hide the default dropdown arrow using appearance: none.
• (A1) Use an HTML symbol to create our own custom arrow – .sel::after { content: "\CODE"; }. I will leave a link to a list of HTML symbols in the extras section below.
• (B) “Expand” the <select> box with width: 100%, and make it fill up the <div> container.

 

PART 3) POSITIONING THE ARROW

/* (C) POSITION CUSTOM ARROW */
/* (C1) REQUIRED FOR ABSOLUTE POSITION BELOW */
.sel { position: relative; }

/* (C2) DEFAULT - ARROW ON RIGHT SIDE */
.sel::after {
  position: absolute;
  top: 50%; right: 10px;
  transform: translateY(-50%);
}
 
/* (C3) ARROW ON LEFT SIDE */
.left.sel::after { left: 10px; right: auto; }
.left.sel select { padding-left: 30px; }

To properly position the arrow:

• (C1) It is necessary to set the <div> container to position: relative.
• (C2) Setting position: absolute; top: 50%; right: N will “push” the arrow to the right side of the <div> container.
•  (C2) Take note, top: 50% will not “accurately vertical center” the arrow. It is necessary to add translateY(-50%) to do that.
• (C3) If you want the arrow to be on the left side, just set left: Npx; right: auto.

 

 

EXTRA) COSMETICS

/* (D) COSMETICS */
/* (D1) CUSTOM ARROW IS ESSENTIALLY TEXT! */
.sel::after { font-size: 16px; color: #aaa; }
 
/* (D2) ROTATE ARROW ON HOVER */
.sel::after { transition: all 0.3s; }
.sel:hover::after {
  transform: translateY(-50%) rotate(90deg);
  color: #ff1212;
}

Finally, some optional cosmetics.

• (D1) The HTML arrow symbol is still text. We can apply color and font size to it.
• (D2) Using CSS transition and rotate, we can easily add a “rotate on mouse hover” animation.

 

 

COMPATIBILITY CHECKS

• CSS Translate – CanIUse
• CSS Rotate – CanIUse

This example will work on all “Grade A” modern browsers.

 

CAN WE CUSTOMIZE THE DROPDOWN OPTIONS?

• No, not exactly. Some CSS properties do work on <option>, but every browser renders the <select><option> differently.
• On a desktop, the selectable options will be below the box.
• But on mobile, it will probably become a popup instead.

The only way to create a “fully customized dropdown box” is to “entirely customize it”, and “make it from scratch”.

 

LINKS & REFERENCES

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

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEAT SHEET