I have always used the "trick":
select {
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
to do custom select boxes on FF but since version 30 is released this stopped working completely. I have tried to find if this was deprecated but couldn't find anything. Is there a workaround, or another method to replace this?
As of January 2015, this now works again with the release of Firefox 35. See the answer below for historical reference.
The hack that was used is this:
select {
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
In my testing, on FF 29, -moz-appearance:none; had no affect. What caused the arrow box to not appear was the second two lines. It said that any overflow is to be replaced by an empty string, and then it used text-indent to cause the select to overflow. Since the arrow box is rendered as a single element, similar to a single letter, this caused it to be replaced by the empty string.
Someone at Mozilla noticed that if you have padding on a dropdown select, the arrow doesn't change size. According to the bug report, this issue has now been fixed:
The problem is that this has divorced the arrow from normal CSS rules. I've tried padding, text-indent, margin, white-space, text-wrap, and a few more, and I can't find anything that will affect it. Elsewhere around the internet, people are saying the same thing, unfortunately.
We have a few options. You can use an overlay combined with pointer-events:none to style the dropdown however you want: Tutorial
You can create a completely separate dropdown to replace select, using Javascript: Tutorial
We can also watch the request on Firefox's Bugzilla, and hope that someday they will create a non-hacky way to do this. PLEASE NOTE: Don't go there and start posting comments about wanting it. Part of the reason it's been so delayed is that people threw a fit. It may help to vote for the issue.
This is now being actively worked on for Firefox. 2 patches have been submitted and have been awaiting review for a week. Most probably scenario is that this makes it into FF35 Aurora, and we have a few weeks for it to get reviewed and approved before the cutoff date (Firefox operates on a 6 week release schedule). It could also be delayed, and it could even theoretically be "uplifted", meaning patched in the current Aurora and Beta versions, to get released sooner.
This how now been officially resolved! Kind of. A patch to allow users to hide the dropdown arrow element has been committed and will be shipped with Firefox 35 in January 2015.
This will only allow users to hide the arrow. To style it is another issue, which has been spun off into another bug ticket which will be considered in the future.
This has now been fixed! Firefox 35 came out on January 13, and you can now use -moz-appearance:none to remove the arrow.
Yes ! Is good ! Thks
.customSelect {
font-size: inherit;
margin: 0;
padding: 0.5em;
background-color: transparent;
color: #393939;
opacity:1;
-moz-appearance: none;
border: 0 none;
border-radius: 0px;
border:1px solid #B1B2B3;
padding-right: 2.5em;
}
.SelectBox select {
background: transparent;
width: 182px;
padding-right: 29px;
font-size: 100%;
text-indent: 0.01px;
text-overflow: "";
border: none;
height: 17.5px;
-webkit-appearance: none;
-moz-appearance: none;
}
.SelectBox {
width: 154px;
height: 15.8px;
overflow: hidden;
background: url("Images/Arrow.png") no-repeat 141px center #ffffff;
border-radius:2px;
border: 1px solid #B90F22;
}
<div class="SelectBox">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
This seems to work fine in every major browser but IE. IE is falling back to the default dropdown so that shouldn't be too much of a problem.
The response provide by Mozilla Firefox to this issue is just unacceptable. The browser is broken and is nothing more than an open sore for malicious code. They promote the V29-30 browser as a security update, but it took over a week since the release date for a notification to appear for V30.
My own response will be to do nothing and I encourage all other developers to do the same. Eventually users will get tired of the design inconsistencies and abandon Mozilla Firefox like they have been in even greater numbers.
If a reasonable support request is meet with sheer contempt and other browsers can do it but Mozilla Firefox no longer can. It’s not me that has to fix my code, but Mozilla Firefox has to fix theirs!
You can use this solution for firefox, using vendor pseudo class :-moz-any() and pointer events only for mozilla and do not affect other browsers, because both is valid since version 3.6.
here is a jsbin example http://jsbin.com/pozomu/4/edit
Although it's a quite dirty hack, you can fix this by adding another overlay element above the arrow down in the CSS of your select wrapper (in my case .form-control-select):
/* The arrow */
.form-control-select:after {
content: "\f078";
z-index: 3;
pointer-events: none;
position: absolute;
right: 10px;
top: 9px;
padding: 6px 7px;
font-size: 10px;
}
/* the white overlay to hide Firefox' arrow */
.form-control-select:before {
position: absolute;
right: 1px;
top: 2px;
bottom: 1px;
width: 20px;
background: #fff;
content: "";
z-index: 2;
border: 1px solid transparent;
border-bottom-right-radius: 3px;
border-top-right-radius: 1px;
pointer-events: none;
}
My HTML:
<div class="form-control-select">
<select class="form-control">
<option value="1">one</option>
<option value="2">two</option>
</select>
</div>
I fixed my this issue by giving some style to div and select individually.
Anyone can change his width and other style properties a/c to needs. :)
Here is the js fiddle for it. JSFIDDLE tested on all the browsers.
select::-ms-expand for IE and -webkit-user-select: none for chrome.
<div class="common-dropdown-small-div" style="width: 220px">
<select id="select" class="common-dropdown-project-select">
<option>
apple
</option>
<option>
blackberry
</option>
<option>
pumpkin
</option>
</select>
</div>
.common-dropdown-small-div{
border: 1px solid rgb(208, 208, 208);
border-radius: 5px !important;
overflow: hidden;
}
.common-dropdown-project-select{
width: 100% !important;
background-image: url("http://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png");
background-position: 97% 60%, 0 0 ! important;
background-repeat: no-repeat;
background-size: 25px 16px;
border: none ! important;
outline : medium none !important;
display: inline-flex !important;
height: 33px !important;
vertical-align: top;
-webkit-appearance: none;
}
select::-ms-expand {
display: none;
}
One option is to wrap the select elements in container elements with overflow: hidden. Increase the width of the select elements to push the down arrow to the right and out of the picture. Then add a border to the container elements that matches the select elements.
.select-container {
overflow: hidden;
display: inline-block;
height: 33px;
border-right: 1px solid #B3B6BD;
}
.select-container select {
width: 113%;
}
The problem is that that this will affect styles set on focus or validation errors, which is why I ended up doing what totas suggested and covering the arrows with pseudo-elements.
