Change the default style of the drop-down list select box with pure CSS

In this article, I'll show you how tochange the style of a drop-down list box without relying on JAVASCR IPT with pure CSS.

The thing is, your team of designers sends you a new PSD (Photoshop document), which is the final design of a new website.

Everything looks good, it's normal, until you see a selection of his/her design the drop-down box is somewhat different from the style provided by the browser by default! You said: "There is no way to do it!" You should not complain about the designer, but it is not very difficult to change the default style of the drop-down input!

Here is the solution.

We see that the default Download selection box is somewhat different in Firefox and Chrome.

This is the case in Chrome and Firefox:

In fact, the following CSS can be solved, the principle is to remove the default browser drop-down box style, and then apply their own, and then attach a right-aligned small arrow image can be.

Select {   /*chrome and Firefox inside the border is not the same, so a copy of the */   border:solid 1px #000;    /* Key: Clear the Default Select selection box style */   appearance:none;   -moz-appearance:none;   -Webkit-appearance:none;    /* Displays the small arrow picture in the middle right of the selection box *   /Background:url ("Http://ourJS.  Github.io/static/2015/arrow.png ") no-repeat scroll right center transparent;     /* Set aside a little position for the drop-down arrows to avoid being covered by text */   padding-right:14px;}   /* Clear the Default selection box style for IE to clear, hide the drop-down arrow */Select::-ms-expand {display:none;}

Online Sample Http://jsbin.com/yuxame/4/edit

Note * This article refers to Change-default-select-dropdown-style-just-css, but it is modified by fixing the length and height of the Select box.

Change the default style of the drop-down list select box with pure CSS