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

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

代码如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>web前端学习扣qun：731771211  每日分享技术，学术交流</title><style type="text/css">.select_style{  width:240px;   height:30px;   overflow:hidden;   background:url(mytest/demo/bg.webp) 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;   -webkit-appearance:none; /*for Webkit browsers*/ } </style></head><body><div >   <select name="select">     <option>星期1</option>     <option>星期2</option>     <option selected>星期3</option>     <option>星期4</option>   </select> </div> </body></html>

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

实现原理:

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

免责声明：本网信息来自于互联网，目的在于传递更多信息，并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益，请及时联系我们，本站将会在24小时内处理完毕。