How to change the default dropdpwn arrow using only CSS


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*/}

Tags:

Comments & Responses

One Response so far.

  1. writeaessay says:

    write essay for me http://dekrtyuijg.com/

    Awesome content. Thank you.

You must be logged in to post a comment.