Ever wondered how to hide the arrow in the select dropdown or style the dropdown completely based on your theme.
It’s possible with some CSS code(mentioned below).
If you wish to support only chrome, firefox, safari, IE10+ browsers you can simply hide the default arrow in the select dropdown by using below code.
CSS
select{
-webkit-appearance: none;
-moz-appearance: none;
}
select::-ms-expand {display: none;}/*works in IE10+*/
Common support to all browsers(including lower versions of IE)
The idea deals by using a span/div tag and styling it as per our theme to look like a dropdown and use a default select dropdown and visually hiding it behind the span by using CSS “opacity” property. By using this “opacity” property, we hide the select dropdown but however clicking that position it reveals the options irrespective of the opacity property, so we are using this as an advantage. By selecting a particular option we get that value/text of that selected option via script and show it in the span through small piece of script.
Demo
See the Pen custom select dropdown by idevelopweb.site (@webstuff) on CodePen.0