I have set up a select with a custom arrow similar to Julio's answer, however it doesn't have a set width and uses an svg as a background image. (arrow_drop_down from material-ui icons)
select { -webkit-appearance: none; -moz-appearance: none; background: transparent; background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='//www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>"); background-repeat: no-repeat; background-position-x: 100%; background-position-y: 5px; border: 1px solid #dfdfdf; border-radius: 2px; margin-right: 2rem; padding: 1rem; padding-right: 2rem; }If you need it to also work in IE update the svg arrow to base64 and add the following:
select::-ms-expand { display: none; } background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSdibGFjaycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+);To make it easier to size and space the arrow, use this svg:
url("data:image/svg+xml,<svg width='24' height='24' xmlns='//www.w3.org/2000/svg'><path d='m0,6l12,12l12,-12l-24,0z'/><path fill='none' d='m0,0l24,0l0,24l-24,0l0,-24z'/></svg>");It doesn't have any spacing on the arrow's sides.
Each browser displays select elements differently and it’s usually the one thing that will stop your forms from looking amazing.
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.