select下拉菜单美化代码实例:
自带的select下拉菜单美观度实在不怎么样，并且不容易美化，当然我们可以模拟实现select下拉菜单，但是代码稍显复杂，不过也可以通过简单的CSS实现此效果，下面通过实例简单作一下介绍。
代码如下:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>美化select下拉菜单-蚂蚁部落</title><style type="text/css">.select_style{ width:240px; height:30px; overflow:hidden; background:url(mytest/demo/bg.jpg) no-repeat 215px; border:1px solid #ccc; -moz-border-radius:5px; /* Gecko browsers */ -webkit-border-radius:5px; /* Webkit browsers */ border-radius:5px; margin:150px;} .select_style select{ padding:5px; background:transparent; width:268px; font-size:16px; border:none; height:30px; /*51texiao.cn*/ -webkit-appearance:none; /*for Webkit browsers*/ } </style></head><body><div class="select_style"> <select name="select"> <option>蚂蚁部落一</option> <option>蚂蚁部落二</option> <option selected>蚂蚁部落三</option> <option>蚂蚁部落四</option> </select> </div> </body></html>
以上代码实现了实现了select下拉框美化效果，当然这里也谈不上美观，因为在这里只是介绍一下它的实现原理，以供大家改造之用，下面简单介绍一下它的实现过程:
实现原理:
其实select下拉菜单美化最让人蛋疼的地方就是向下的箭头，在这里我们在select下拉菜单外面套了一个div，并且div的宽度小于select下拉菜单的宽度，这样的目的是将select下来菜单的箭头给遮挡，然后再给次div设置一个背景图片作为下拉箭头，这样就实现了我们想要的效果。
原文地址是:http://www.51texiao.cn/HTML5jiaocheng/2015/0521/2130.html