你的位置:首页 > 网页设计

[网页设计]select下拉菜单美化代码实例


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