web前端html实例-select下拉菜单美化代码

原创 高志飞 教程 html 53阅读 2019-05-11 18:56:24 举报

自带的select下拉菜单美观度实在不怎么样,并且不容易美化,当然我们可以模拟实现select下拉菜单,但是代码稍显复杂,不过也可以通过简单的CSS实现此效果,下面通过实例简单作一下介绍。

代码如下:

以上代码实现了实现了select下拉框美化效果,当然这里也谈不上美观,因为在这里只是介绍一下它的实现原理,以供大家改造之用,下面简单介绍一下它的实现过程:

实现原理:

其实select下拉菜单美化最让人蛋疼的地方就是向下的箭头,在这里我们在select下拉菜单外面套了一个div,并且div的宽度小于select下拉菜单的宽度,这样的目的是将select下来菜单的箭头给遮挡,然后再给次div设置一个背景图片作为下拉箭头,这样就实现了我们想要的效果。

评论 ( 1 )
最新评论
zhziya 2019-06-14 17:09:52 1F