Use CSS to change the default style of the drop-down list select box

This article uses CSS to change the default style of the drop-down list select box

Principle

The principle is to clear the default drop-down box style of the browser, then apply your own, and then attach a picture to the right-aligned small arrow. Of course, the small arrows on the right can be implemented with pseudo-element before or after.

Select {  /*chrome and Firefox inside the border is not the same, so a copy of the */  border:solid 1px #000;  /* 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 ("Arrow.png") no-repeat the center;  padding-right:14px;} /* Clear the Default selection box style of IE to clear, hide the drop-down arrow */select::-ms-expand {display:none;}

Compatibility issues

IE8/9 does not support Appearance:none CSS properties, so if you need a compatible version of IE, we need to add a parent container for the container to cover the small arrows, and then add a small right offset to the select or a width greater than the parent element. Sets the parent's CSS property to be out-of-the-box invisible and can be overridden by a small arrow. Then add a background picture or pseudo-element to the parent container to implement the custom arrows.

HTML code:

<div id= "Parentdiv" >  <select>      <option>a</option>      <option>b</option >      <option>c</option>  </select></div>

CSS code:

#parentDiv {    background:url (' ico.png ') No-repeat right center;    width:80px;    height:34px;    Overflow:hidden;} #parentDiv Select {    background:transparent;    Border:none;    padding-left:10px;    width:100px;    height:100%;}

Defects

The width of the drop-down option is wider than his parent container, and looks a little uncoordinated, and depends on your own choice of issues and compatibility with the project.