remove default select box arrow in firefox

Question

I have to remove the default select box arrow in firefox I used the below code

-webkit-appearance: none;
-moz-appearance:none; 
background: rgba(0,0,0,0);

its working good in chrome. but its not working in firefox.

Answer 1

Update: this was fixed in Firefox v35. See the full gist for details.

---

Just figured out how to remove the select arrow from Firefox. The trick is to use a mix of -prefix-appearance, text-indent and text-overflow. It is pure CSS and requires no extra markup.

select {
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
}

Tested on Windows 8, Ubuntu and Mac, latest versions of Firefox.

Live example: http://jsfiddle.net/joaocunha/RUEbp/1/

More on the subject: https://gist.github.com/joaocunha/6273016

Answer 2

Handling this can be done in following way : 1) your html might be like this:

<div class="select-box">
    <select>
        <option>Mozilla Firefox</option>
        <option>Google Chrome</option>
        <option>Apple Safari</option>
        <option>Internet Explorer</option>
    </select>
</div>

2)your css should be like this:

.select-box select{width:100%}
/* For Microsoft IE */
select::-ms-expand {    display: none; }

/* For Webkit based browsers Google Chrome, Apple Safari and latest Gecko browsers */
select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

Try it. I hope this helps. Working on latest versions of firefox, chrome, ie and safari, if not on all versions. But do check on all versions of all browsers.

Answer 3

I think there's no simple way of doing it in Firefox, especially for the Linux and Mac OS version. Change the opacity of the select box to 0, and then use a div/span to contain the select box. After that, add some styles on that container. This is a not-recommended workaround, and it's too costly if we want to only change the style of a select box. However, it solves the problem anyway. Hope this helps. =)

Original:

<select>
    <option>Value 1</option>
    <option>Value 2</option>
</select>

New:

<span class="select-container">
    <select>
        <option>Value 1</option>
        <option>Value 2</option>
    </select>
</span>

Style:

.select-container {
    width: 100px;
    height: 30px;
    position: relative;
    border: 1px solid #ccc;
    background: url("path of the arrow image") no-repeat right center;
    background-size: 25px;
}
select {
    position: absolute;
    opacity: 0;
    outline: 0;
}

Then, add some Javascript to display the selected value in the container.

Answer 4

Simple way to remove drop down arrow from select in Chrome and Mozilla

select {
        /*for firefox*/
        -moz-appearance: none;
        /*for chrome*/
        -webkit-appearance:none;
      }

/*for IE10*/
select::-ms-expand {
    display: none;
}

<select>
 <option>India</option >
 <option>India</option >
 <option>India</option >    
</select>

Answer 5

gcyrillus suggest a neat solution for this issue in this website.

http://css-tricks.com/forums/topic/remove-select-arrow-for-chrome-and-firefox/

Answer 6

    $(document).ready(function(){
        $(".selsect_class").each(function(){
            $(this).after("<span class='select_holder'></span>");
        });
        $(".selsect_class").change(function(){
            var selectedOption = $(this).find(":selected").text();
            $(this).next(".select_holder").text(selectedOption);
        }).trigger('change');
    })

.selsect_id{
  background: url("http://a1lrsrealtyservices.com/demo/ot-select.png") no-repeat scroll right center #fff;
  border: 1px solid #ccc;
  border-radius: 2px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05) inset;
  box-sizing: border-box;
  display: block;
  font-size: 12px;
  height: 29px;
  margin: 0 5px 5px 0;
  width: 100%;
 }
 .selsect_class{
  cursor: pointer;
  font-size: 14px;
  height: 29px;
  opacity: 0;
  position: relative;
  width: inherit;
  z-index: 4;
 }
 .selsect_class option{padding: 3px 15px;}
 .select_holder{position: absolute;left: 30px;top: 5px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selsect_id">
 <select class="selsect_class">
  <option value="">- Choose One -</option>
  <option value="1">jillur</option>
  <option value="2">korim</option>
  <option value="3">rohim</option>
  <option value="4">Uncategorized</option>
 </select>
</div>

preview image