将浏览器默认的下拉框样式清除，然后应用上自己的，再附一张向右对齐小箭头的图片即可。1 select {2 /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/3 border: solid 1px #000;4 5 /*很关键：将默认的select选择框样式清除*/6 appearance:none;7 -moz-appearance:none;8 -webkit-appearance:none;9 /*在选择框的最右侧中间显示小箭头图片*/ 10 background: url("http://ourjs.github.io/static/2015/arrow.png...
将浏览器默认的下拉框样式清除，然后应用上自己的，再附一张向右对齐小箭头的图片即可。 1 select { 2 /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/ 3 border: solid 1px #000; 4 5 /*很关键：将默认的select选择框样式清除*/ 6 appearance:none; 7 -moz-appearance:none; 8 -webkit-appearance:none; 9 /*在选择框的最右侧中间显示小箭头图片*/10 background: url("http://ourjs.github.io/sta...
这篇文章使用css改变下拉列表select框的默认样式介绍原理原理是将浏览器默认的下拉框样式清除，然后应用上自己的，再附一张向右对齐小箭头的图片即可。当然右侧的小箭头可以用伪元素before或者after来实现。select { /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/border: solid 1px #000; /*将默认的select选择框样式清除*/appearance:none;-moz-appearance:none;-webkit-appearance:none; /*在选择框的最右侧中间显...