本文共 1105 字，大约阅读时间需要 3 分钟。
默认状态下的select下拉菜单简直是丑爆了，所以下面就介绍一下一个简单的方式对select下拉菜单进行美化，下面就是一段这样的代码实例，当然也不够美观，这里只是提供一种美化的思路，在实际应用中可以进行更为优秀的美化，代码如下:
| 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <!DOCTYPE html> < html > < head > < meta charset = " utf-8" > < meta name = "author" content = "" /> < title >蚂蚁部落</ title > < style type = "text/css" > .select{ margin-top:0px; outline:none; border:1px solid #BBBBBB; border-radius:4px; position:relative; width:170px; } .text{ height:40px; -webkit-appearance:none; appearance:none; border:none; font-size:18px; padding:0px 10px; display:block; width:100%; -webkit-box-sizing:border-box; box-sizing:border-box; background-color:#FFFFFF; color:#333333; border-radius:4px; } </ style > </ head > < body > < div class = "select" > < select class = "text" > < option >--选择科目--</ option > < option >css教程</ option > < option >div教程</ option > < option >javascript教程</ option > < option >jquery教程</ option > </ select > </ div > </ body > </ html > |
原文发布时间为：2017-2-18
本文作者：admin
本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落
原文链接：
转载地址：http://kizxx.baihongyu.com/