Sometime we need to change the drop-down  or select field arrow according to the PSD.  We can do it several way but most of them  works only with Chrome / Safari but not at Firefox. Now I am sharing my experience to get it works on all the major browser….

Very first we will need to create a HTML form….

Now we will Add the CSS so it can work with chrome and safari browser.

everything is basic here but the code

will remove the default arrow so our background property can view without any problem. But for FireFox it will not work at all. In this case we will need to add the :before CSS property of outer div and add image as content and need to set the property absolute.  Also we need to set z-index to -1 and  the outer div we must set it position: relative and z-index:1 . Also we need to add some CSS for custom select elements in Mozilla Firefox. And certain we will do specific query so it only work with Firefox Browser….