IE & Firefox - custom drop down could not remove native arrows - css

Question

I'm trying create a custom drop down control and I need to hide the arrows from the native controls. I'm using the following CSS, which is working for Chrome and Safari, but not in Mozilla and IE.
select.desktopDropDown
{
appearance: none;
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari and Chrome */
}
Here is a [jsfiddle][1].

Answer 1

Use this it will work but with IE10+ and for FF :
Your css should look like this:
select.desktopDropDown::-ms-expand {
display: none;
}
More about ::ms-expand.
Then for the rest :
select.desktopDropDown {
outline : none;
overflow : hidden;
text-indent : 0.01px;
text-overflow : '';
background : url("../img/assets/arrow.png") no-repeat right #666;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
Note: I hardcoded path "../img/assets/arrow.png" as background.
This should work good for you in IE, Firefox and Opera .

Answer 2

Bare-bones examples:
For I.E:
select::-ms-expand {
display: none;
}
For Firefox:
select {
-moz-appearance: none;
appearance: none;
text-overflow: ''; /* this is important! */
}

Answer 3

For Fx I use -moz-appearance: checkbox-container which works nicely.
So putting it all together the following should be sufficient for you:
select.desktopDropDown {
appearance: none;
-webkit-appearance: none;
-moz-appearance: checkbox-container;
border-style: none;
}
select.desktopDropDown::-ms-expand {
display: none;
}

Answer 4

In fact this trick is mainly required for IE10+ where the arrows are in the Metro style of Windows 8, even on Windows 7. Though Windows 8 users must be used to the style cause it's used through the OS. Anyway, I'd recommend instead of using:
display: none;
To use:
visibility: hidden;
Because, at least in IE, the former causes the blue line of the selected item to overlay the dropdown arrow when the select is focused, while the latter does not.

Answer 5

we can create custom by using css. tested on IE10, Mozilla and chrome borwser...
Working Example as below :
.customSelect {
position: relative;
}
/* IE11 hide hacks*/
select::-ms-expand {
display: none;
}
.customSelect:after {
content: '<>';
font: 17px "Consolas", monospace;
color: #333;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
right: 11px;
/*Adjust for position however you want*/
top: 18px;
padding: 0 0 2px;
border-bottom: 1px solid #999;
/*left line */
position: absolute;
pointer-events: none;
}
.customSelect select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Add some styling */
display: block;
width: 100%;
height: 50px;
float: none;
margin: 5px 0px;
padding: 0px 24px;
font-size: 16px;
line-height: 1.75;
color: #333;
background-color: #ffffff;
background-image: none;
border: 1px solid #cccccc;
-ms-word-break: normal;
word-break: normal;
}
<div class="customSelect">
<label>
<select>
<option selected> Select Box </option>
<option>Option 1</option>
<option>Option 2</option>
<option>Last long option</option>
</select>
</label>
</div>