Firefox 30 is not hiding select box arrows anymore
Update
As of January 2015, this now works again with the release of Firefox 35. See the answer below for historical reference.
Background
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.
What Happened
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.
What Now
We have a few options. You can use an overlay combined with
pointer-events:none
to style the dropdown however you want: TutorialYou 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.
Update Sept. 2014
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.
Update Oct. 2014
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.
Update Jan. 2015
This has now been fixed! Firefox 35 came out on January 13, and you can now use -moz-appearance:none
to remove the arrow.
How to remove the arrow from a select element in Firefox
Okay, I know this question is old, but 2 years down the track and mozilla have done nothing.
I've come up with a simple workaround.
This essentially strips all formatting of the select box in firefox and wraps a span element around the select box with your custom style, but should only apply to firefox.
Say this is your select menu:
<select class='css-select'>
<option value='1'> First option </option>
<option value='2'> Second option </option>
</select>
And lets assume the css class 'css-select' is:
.css-select {
background-image: url('images/select_arrow.gif');
background-repeat: no-repeat;
background-position: right center;
padding-right: 20px;
}
In firefox, this would display with the select menu, followed by the ugly firefox select arrow, followed by your nice custom looking one. Not ideal.
Now to get this going in firefox, add a span element around with the class 'css-select-moz':
<span class='css-select-moz'>
<select class='css-select'>
<option value='1'> First option </option>
<option value='2'> Second option </option>
</select>
</span>
Then fix the CSS to hide mozilla's dirty arrow with -moz-appearance:window and throw the custom arrow into the span's class 'css-select-moz', but only get it to display on mozilla, like this:
.css-select {
-moz-appearance:window;
background-image: url('images/select_arrow.gif');
background-repeat: no-repeat;
background-position: right center;
padding-right: 20px;
}
@-moz-document url-prefix() {
.css-select-moz{
background-image: url('images/select_arrow.gif');
background-repeat: no-repeat;
background-position: right center;
padding-right: 20px;
}
}
Pretty cool for only stumbling across this bug 3 hours ago (I'm new to webdesign and completely self-taught). However, this community has indirectly provided me with so much help, I thought it was about time I give something back.
I have only tested it in firefox (mac) version 18, and then 22 (after I updated).
All feedback is welcome.
How to remove default arrow form select in Firefox (Firefox version 30) and IE
You can try:
select::-ms-expand {
display: none;
}
for hiding dropdown arrow in IE and for more info.
and for firefox us can use this:
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
see this fiddle:
see this link and link2
let me know if you still have issues with arrow
thanks
Select default arrow doesn't hide on FF
what you can do is set -moz-appearance: window
which will wipe all of the default styling. Then you can wrap the select in a container (which you have already), and style the container to look like your select box and then make the select inside the full height and width of the container so that clicking on it still triggers the action.
JSFIDDLE
Hiding Select List Arrow CSS3
Found the solution - it seems you need to make the select box bigger than the container to hide the dropdown arrow as such:
.styled-select {
width:305px;
overflow: hidden;
background: #F8F8F8;
border: 1px solid #CCC;
height: 37px;
border-radius:5px;
}
.styled-select .select {
width: 105.5%;
border: 0;
border-radius:2px;
line-height: 1.5;
padding:8px 23px 5px 23px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
background: transparent url("/images/ddarrow.png") no-repeat scroll 93% -8px;
}
css dropdown menu screen problem on latest firefox version
This is a bug with the latest version of FireFox. See more here:
Firefox 30 is not hiding select box arrows anymore
A quick way to resolve this bug is to wrap it in a container that is not as wide as your select drop down. You would then style the container with a dropdown arrow.
Here's an example.
HTML
<div class="select-hide">
<select>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
</select>
</div>
CSS
.select-hide{
width: 85px;
overflow:hidden;
border:1px solid red;
}
select{
width: 100px;
}
How to remove the default arrow icon from a dropdown list (select element)?
If you use TailwindCSS
You may take advantage of the appearance-none
class.
<select class="appearance-none">
<option>Yes</option>
<option>No</option>
<option>Maybe</option>
</select>
Hide Up & Down Arrow Buttons (Spinner) in Input Number - Firefox 29
According to this blog post, you need to set -moz-appearance:textfield;
on the input
.
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;}
input[type=number] { -moz-appearance:textfield;}
<input type="number" step="0.01"/>
Related Topics
Bootstrap 3 - How to Maximize Input Width Inside Navbar
Display Adobe PDF Inside a Div
Why Is "&Reg" Being Rendered as "®" Without The Bounding Semicolon
Make an Image Width 100% of Parent Div, But Not Bigger Than Its Own Width
Center a Div Horizontally and Vertically and Keep Centered When Resizing The Parent
Remove .HTML and .PHP Extensions with .Htaccess
Best Way to Implement Background Image on HTML or Body
How to Center Multiple Divs Inside a Container in CSS
How to Center a (Background) Image Within a Div
Can't Show Some Websites in Iframe Tag
Should I Use <Ul>S and <Li>S Inside My <Nav>S
HTMLagilitypack Drops Option End Tags
Github Pages and Relative Paths
Default Website Image for Social Sharing
How to Send HTML Email Using R
How to Color Text in Github's Flavoured Markdown
@Font-Face Not Working with Specific Version of Internet Explorer 11