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].
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 .
select.desktopDropDown :: -ms-expand. It didnt work until I made it select.desktopDropDown::-ms-expand (no spaces around ::. IE - trolling since 2009
@include appearance(none); great answer +1Bare-bones examples:
select::-ms-expand { display: none; } select { -moz-appearance: none; appearance: none; text-overflow: ''; /* this is important! */ } 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; } 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.
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>