remove default select box arrow in firefox - html

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