Remove arrow from select in Firefox and IE

This post will be short as I don’t take credit but ever had to remove the arrow from the select dropdown in IE or Firefox ? For me, it wasn’t a “show stopper” to launch the site but it sure made it ugly. Solution? well I found this jsfiddle that explained the trick.

select {
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
}

1. Set -prefix-appearance to none to remove the styles;
2. Use text-indent to “push” the content a bit to the right;
3. Finally, set text-overflow to an empty string. Everything that extends beyond it’s width will become… nothing! And that includes the arrow.

The post Remove arrow from select in Firefox and IE appeared first on Coding Insight.