How to change the default dropdpwn arrow using only CSS
To Do so just add the following code to default select option class
-webkit-appearance: none; /*Removes default chrome and safari style*/ -moz-appearance: none; /* Removes Default Firefox style*/ background: url('dropdown_arrow.png')no-repeat; /*Adds background-image*/ background-position:82px 7px; /*Position of the background-image*/ width:100px; /*Width of select dropdown to give space for arrow image*/ text-indent:0.01px; /* Removes default arrow from firefox*/ text-overflow:""; /*Removes default arrow from firefox*/}