Use pure css to change the default style of the select box in the drop-down list-dehua. Chen

Use pure css to change the default style of the select box in the drop-down list-dehua. Chen to clear the default drop-down box style of the browser, apply your own style, and attach a picture with a small arrow on the right.

1 select {2/* the borders in Chrome and Firefox are different, so rewrite */3 border: solid 1px #000; 4 5: clear the default select box style */6 appearance: none; 7-moz-appearance: none; 8-webkit-appearance: none; 9/* show a small arrow in the middle right of the Selection box */10 background: url ("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent; 11/* Leave a position for the drop-down arrow to avoid text overwriting */12 padding-right: 14px; 13} 14/* clear the default selection box style of ie, hide the drop-down arrow */15 select:-ms-expand {display: none ;}

IE8/9 does not support the appearance: none CSS attribute. To support this attribute, you may need a very special method. Refer to SF: we need to add a parent container for it, the container is used to overwrite the small arrow, and then add a small offset to the right or the width is greater than the parent element for the select statement. If the CSS attribute of the parent class is set to invisible to the excess part, the small arrow is overwritten. Then add a background image to the parent container.

1 
2   3       what4       the5       hell6   7 

1 #parent {background: url('yourimage') no-repeat; width: 100px;2 height: 30px; overflow: hidden;}3 #parent select {background: transparent; border: none; padding-left: 10px; width: 120px; height: 100%;}

Transparent input background code

Background-color: transparent;