Doesn't work anymore, your codepen demo as well. Win7, firefox 30

@YemSalat, @hom-nic

In firefox 30 this works:

<div class="styled-select">
     <select>
         <option>Here is the first option</option>
         <option>The second option</option>
         <option>The thrid option</option>
     </select>
</div>

.styled-select { 
  overflow: hidden; 
  width: 200px;
}

@-moz-document url-prefix(){
  .styled-select select { width: 110%; }
}

For a cross-browser solution (Tested in IE 8-11, Firefox 30, Chrome 35), here's what I use: http://codepen.io/jamesbarnett/pen/JhHjK

@barnettjw the problem with your solution is that you cannot click the arrow.

I have an updated solution that I've implemented at work, but I haven't had time to build a pen yet.

// Strip away all the browser styles for a select box.
// The syntax for this needs to be as follows.
//
// <div class="select--clean">
//   <select>...</select>
//   <i class="fa fa-caret-down">
// </div>
//
// To add custom style overrides, either wrap the whole div inside another
// class, or add a class to the div with 'select--clean'.
//
// Example: http://codepen.io/drbrts/pen/JAbyF

.select--clean
  display: inline-block
  overflow: hidden
  position: relative

  select
    @include appearance(none)
    width: 100%

    border: 0
    outline: 0
    border-radius: 0
    margin: 0
    padding-right: 15px

    letter-spacing: inherit
    background: transparent

    &:-moz-focusring
      color: transparent

    &::-ms-expand
      display: none

    &,x:-moz-any-link,x:default
      padding-right: 0
      width: -moz-calc(100% + 17px)
      width: calc(100% + 17px)

  option
    border: 0

  i
    pointer-events: none
    position: absolute
    right: 0
    top: 2px
    color: inherit

@mixin select-colors($color: #000000, $bg: #ffffff)
  color: $color
  background: $bg

  select
    color: $color

    &:-moz-focusring
      text-shadow: 0 0 0 $color

  option
    color: $color
    background: $bg

  i
    color: $color

Guys, don't use any other value of -moz-appearance (like window, tabpanels, etc) as the inherited styles are not customisable.

Hi, is there any way to remove the default select arrow in firefox and use our image? I have put these two code, but still doesn't work.
-moz-appearance: none;
-webkit-appearance: none;
thanks

I have used suggestion from barnettjw and it works on Firefox 30

Here is a work around

<div class="selectwrap">
      <select>
        <option>Option 1</option>
        <option>Option 1</option>
        <option>Option 1</option>
      </select>
</div>

select{
border:1px solid #ccc;
height: 34px;
width: 250px;
padding: 6px 12px;
}
.selectwrap{
position: relative;
float: left;
}
.selectwrap:after{
content:"↓";
text-align: center;
line-height:32px;
position: absolute;
width: 32px;
height: 32px;
background: #fff;
right: 1px;
top: 1px;
pointer-events: none;
}

http://codepen.io/anoopjohn/pen/GcJoL

Hi, I managed to find way to hide select arrow in Firefox 31.0 (beta), I actually don't really know how it works, but it works. Here is pen: http://codepen.io/keksa/pen/hpqyx

Nice finding, @keksa!

@aj9666 code works for me - the only thing I did different was modified:

content: " "; //didn't want the arrow at all
color: #fff; //ensure there is no character visible

Hi.
Do someone found a way not including div?

Unfortuantely with @keska's fix, you can't apply padding or margins to the actual <select> tag else the arrow will show up again.

Hi,
if you are interested, my solution is using vendor pseudo class :-moz-any() and pointer events only for mozilla because both is valid since version 3.6.

here is a jsbin example
http://jsbin.com/pozomu/4/edit

Rodrigo-Ludgero's solution works also

@iamalfonse: I was able to sort of emulate border and padding in @keska's solution by using inset box-shadow for border and color: transparent with an offset text-shadow for padding. See: http://jsfiddle.net/sstur/2EZ9f/

@anupjon's solution worked for me.

@joaocunha - Just used your URL prefix method to hide my custom arrow in FF33. Thanks a ton.

This issue is quite annoying, tested a couple hacks from here and there, but @anupjon's solution works for me as well in Win 7, FF32.
However I haven't figured out to make it appear as a working cursor, "cursor: pointer;" doesn't seems to work with "pointer-events: none;". If anyone figured that out let me know :)

@joaocunha's third solution worked for me. Thank you!
https://gist.github.com/joaocunha/6273016/#comment-1244649

This solution is elegant ;)

@-moz-document url-prefix() {
 select {
    overflow:hidden; /* optional */
    width: 120%;
 }
}

Short option labels (like numbers 1, 2, 3...) were causing the select arrow to peak out with width: 120% for me.
This seems to be more flexible:

@-moz-document url-prefix() {
 select {
   width: calc(100% + 16px);
 }
}

-moz-appearance: none; will support select elements in Firefox 35. That version comes out in January, and the Developer Edition has this feature now. Here's the Bugzilla ticket.

Edit: Whoops, just realized that the content at the top of the gist already explains that. Sorry for the extra comment!

Well, well!!!

The solution is very near of us... maybe in next Firefox release!!!
I made a workaround in the meantime:

Tested on Chrome 39, Safari 8 and FF 33 and FF 35 Developer Edition

• gist
• codepen

🍻

Solution does not work if border: 0.
FF 33.1, Win7

A modified combination of @Martskin and @iLenElFuerte comment worked best for me, as overflow: hidden would break the layout for me:

@-moz-document url-prefix() {
   select{
        overflow: -moz-hidden-unscrollable;
        width: calc(100% + 16px);
    }
}

Use this codepen if you want to support firefox: http://codepen.io/gijs/pen/MYKreR
It uses pseudo child's to hide the down arrows. (firefox, ie10+, chrome, safari, etc..)

@anupjon FTW!!! Thanks for posting that solution it worked for me. Just need to adjust to account for screen breaks.

UPDATE - If you are following @anupjon 's solution, just be aware of the float: left; set on the "selectwrap" div - It will cause a slight issue with various breakpoints.

Too much words...

It should be formatted like this for faster and better reading!
-- code example with few names --
-- very long explanation goes after all of the primary codes --

anyway, thank you for sharing... 😊

Great solution @gijsroge , i like how you just used a character to create the arrow, there is similar tutorial on how to do this here (also works in firefox) https://fabriceleven.com/design/clever-way-to-change-the-drop-down-selector-arrow-icon/

How to select box text show in 2 line?
Not working my css in ( Mozilla Browser )...But support in Chrome ...

MY CSS
select {
white-space: normal;
line-height: normal;
}