IE & Firefox - custom drop down could not remove native arrows
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 .
Remove Select arrow on IE
In IE9, it is possible with purely a hack as advised by @Spudley. Since you've customized height and width of the div and select, you need to change div:before
css to match yours.
In case if it is IE10 then using below css3 it is possible
select::-ms-expand {
display: none;
}
However if you're interested in jQuery plugin, try Chosen.js
or you can create your own in js.
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 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>
Removing the IE10 Select Element Arrow
Avoid browser-sniffing and conditional comments (which aren't supported as of Internet Explorer 10), and instead take a more standard approach. With this particular issue you should be targeting the ::-ms-expand
pseudo element:
select::-ms-expand {
display: none;
}
Related Topics
Add a Twitter Share Button to Shiny R Navbar
How to Nest Media Queries Within Media Queries
How to Solve the Table Row Background Image Problem, in Chrome, in Multi Celled Tables
CSS Background-Image Refuses to Display in ASP.NET MVC
CSS Positioning Elements Next to Each Other
CSS Image Layouting Before Image Loaded
How to Display CSS3 Columns on Ie
Different Behaviours of Treating \ (Backslash) in the Url by Firefox and Chrome
Bootstrap 4 Align Elements Right Inside a Col Div
Css3 Transitions: Is There an on Click Option Without Using Jquery
Jqgrid Zebra/Alt Rows Background Not Working Due to UI Theme Class
Extracting Content in :After Using Xpath
Difference Between "Margin-Left", and "Left" (Or "Margin-Right", and "Right")
Fluid Container in Bootstrap 3
Angular Material Side Bar with "Half" Side Mode
Bootstrap 4 How to Have Margin Between Columns Without Going Over Space