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;
}
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 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>
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.
Revert select drop down style/arrow after changing css in Internet Explorer
You can style drop down arrow using this IE-specific selector:
select::-ms-expand {
/* your styles */
}
Works only in IE10, IE11.
JsFiddle demo
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 .
Related Topics
How to Change Font Color of Primary Palette in Angular Material2
Hover on Element and Highlight All Elements with the Same Class
My Fixed Background Made Scrolling the Site Very Slow, What How to Do to Improve It
Styling the New Twitter Widget (Embedded Timeline)
Keep Div Height Relevant to Aspect Ratio
Customise Tumblr's *New* Like Button Iframe {Likebutton}
Css3 Gradient Rendering Issues from Transparent to White
How to Draw a Partial Circle Outline in CSS (Open Ring Shape)
What Is the Right Combination of Prefixes for CSS Transitions and Transforms
CSS Drop Shadow for CSS Drawn Arrow
Bootstrap Carousel as Website Background
Select All Elements After Specific Element
How to Include Common CSS Class in Another CSS Class
Css3 Animate: How to Have the Object Not Revert to Its Initial Position After Animation Has Run
Parent Height Doesn't Follow Their Float Children
What Are Differences Between Rgb VS Rgba Other Than 'Opacity'