How to create custom select tags (include Firefox solution)

Firefox Custom Select with Hack - Bootstrap Themes

Share this content with your friends


Most of my friends know that I am a perfectionist, I draw attention to the smallest details. That’s why both in my projects and life everything should be pixel perfect :)

Since December 2013 I’ve been working very hard on my biggest project, the brix.io. But life means nothing without fun, so in some spare time I created completely new bootstrap admin template, so please welcome – cleverAdmin.

I spent a lot of hours on this project because I wanted to make it work perfect, but I hit one big problem – <select> tags design. Each browsers have different style for <select> tags. But I manage to found a solution, how to change it and have beautiful <select> tags in our project.

Please take a look at the style from my last theme cleverAdmin:


select {
background: #fff url("../img/select.png") no-repeat;
background-size: 24px 20px;
background-position:right center;
.border-radius(2px);
border: 1px solid @mainD5;
.box-shadow;
color:#888;
outline:none;
display: inline-block;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
cursor:pointer;
}

The most important part is


-webkit-appearance:none;
-moz-appearance:none;
appearance:none;

because it blocks default browser style.

I thought that it’s enough, but the problem began when I checked it in the Firefox. My selected elements looked like that… Chevrons were still there!

Firefox Custom Select - Bootstrap Themes

Firefox Custom Select – Bootstrap Themes

Fortunately I found a great solution, a little hack which resolved my problem.


@-moz-document url-prefix() {
select {
text-indent: 0.01px;
text-overflow: '';
}
}

Firefox Custom Select with Hack - Bootstrap Themes

Firefox Custom Select with Hack – Bootstrap Themes