Easily change drop down arrow

Where is with a regular button it’s fairly easy to change it, changing the selector arrow is another story. Just look at some of the possible variations (and those are outdated)!

There are many tutorials out there to change the selector drop down. Unfortunately, many of them involve placing an image over the entire element or creating your own image and sticking it in the corner.

The below solution will work for all browsers and only take seconds to implement and only needs some CSS! You can see it in action on our contact page and blog

See the Pen qOmNPG by Alex (@fabriceleven) .

How does it work?

Simple, we hide the standard arrow, then we create “<>” text and just rotate it 90 degrees. So if in an example above you don’t like “<>” you can load whatever font you want and just display that element instead of our “>” arrows.

basic select html code

<div class="selectdiv">
  <label>
      <select>
          <option selected> Select Box </option>
          <option>Option 1</option>
          <option>Option 2</option>
          <option>Last long option</option>
      </select>
  </label>
</div>

The CSS :

We will basically use the :after selector to add our new characters and rotate them. Since we are using absolute property to position the arrows your top div needs to have a relative property in it. The next thing is the magical appearance: none .selectdiv select {} It hides the standard button.

So the final magical CSS that will make this work is:

body {
  background: #f2f2f2;
}

.selectdiv {
  position: relative;
  /*Don't really need this just for demo styling*/
  
  float: left;
  min-width: 200px;
  margin: 50px 33%;
}

/*To remove button from IE11, thank you Matt */
select::-ms-expand {
     display: none;
}

.selectdiv:after {
  content: '<>';
  font: 17px "Consolas", monospace;
  color: #333;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  right: 11px;
  /*Adjust for position however you want*/
  
  top: 18px;
  padding: 0 0 2px;
  border-bottom: 1px solid #999;
  /*left line */
  
  position: absolute;
  pointer-events: none;
}

.selectdiv select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Add some styling */
  
  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: 1px solid #cccccc;
  -ms-word-break: normal;
  word-break: normal;
}

That’s it!
You can adjust the top and right values however you want  to adjust it for your design. You can of course change the color or remove the left line all together.

Make it more fancier

Now that we know how it works, it’s really easy to make things look way better by just including a different font. By adding a popular FontAwesome framework we can replace our “>” symbol with a down chevron. Because it’s a down chevron we don’t need to roate it like in our previous example. Here is the codepin:

See the Pen Styling select box with CSS + fontAwesome by Alex (@fabriceleven) .

Let us know where you used it and how it worked out.