JS+CSS美化的漂亮Select列表框

最新推荐文章于 2021-05-31 14:37:56 发布

原创最新推荐文章于 2021-05-31 14:37:56 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #url #function #div #xhtml #html

JavaScript 专栏收录该内容

33 篇文章

订阅专栏

本文介绍了一种使用JavaScript和CSS美化HTML中Select下拉列表的方法，提供了三种不同风格的实现方案，并详细展示了如何通过代码定制样式及交互效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS+CSS美化的漂亮Select列表框</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">body{background:#CFDFEF;font:12px/150% "Lucida Grande", Arial, Verdana, Helvetica, sans-serif;} #uboxstyle .select_box{width:100px;height:24px;} #macstyle .select_box{width:91px;height:24px;} #tm2008style .select_box{width:102px;height:24px;} #uboxstyle div.tag_select{display:block;color:#79A2BD;width:80px;height:24px;background:transparent url("/jscss/demoimg/200907/ubox-select.gif") no-repeat 0 0;padding:0 10px;line-height:24px;} #uboxstyle div.tag_select_hover{display:block;color:#79A2BD;width:80px;height:24px;background:transparent url("/jscss/demoimg/200907/ubox-select.gif") no-repeat 0 -24px;padding:0 10px;line-height:24px;} #uboxstyle div.tag_select_open{display:block;color:#79A2BD;width:80px;height:24px;background:transparent url("/jscss/demoimg/200907/ubox-select.gif") no-repeat 0 -48px;padding:0 10px;line-height:24px;} #uboxstyle ul.tag_options{position:absolute;padding:0;margin:0;list-style:none;background:transparent url("/jscss/demoimg/200907/ubox-select.gif") no-repeat right bottom;width:100px;padding:0 0 5px;margin:0;} #uboxstyle ul.tag_options li{background:transparent url("/jscss/demoimg/200907/ubox-select.gif") repeat-y -100px 0;display:block;width:80px;padding:0 10px;height:24px;text-decoration:none;line-height:24px;color:#79A2BD;} #uboxstyle ul.tag_options li.open_hover{background:transparent url("/jscss/demoimg/200907/ubox-select.gif") no-repeat 0 -72px;color:#fff} #uboxstyle ul.tag_options li.open_selected{background:transparent url("/jscss/demoimg/200907/ubox-select.gif") no-repeat 0 -96px;color:#fff} #macstyle div.tag_select{display:block;color:#000;width:71px;height:24px;background:transparent url("/jscss/demoimg/200907/mac-select.gif") no-repeat 0 -24px;padding:0 10px;line-height:24px;} #macstyle div.tag_select_hover{display:block;color:#000;width:71px;height:24px;background:transparent url("/jscss/demoimg/200907/mac-select.gif") no-repeat 0 0;padding:0 10px;line-height:24px;} #macstyle div.tag_select_open{display:block;color:#000;width:71px;height:24px;background:transparent url("/jscss/demoimg/200907/mac-select.gif") no-repeat 0 -48px;padding:0 10px;line-height:24px;} #macstyle ul.tag_options{position:absolute;margin:-4px 0 0;list-style:none;background:transparent url("/jscss/demoimg/200907/mac-select.gif") no-repeat left bottom;width:100px;padding:0 0 5px;margin:0;width:71px;} #macstyle ul.tag_options li{background:transparent url("/jscss/demoimg/200907/mac-select.gif") repeat-y -91px 0;display:block;width:61px;padding:0 0 0 10px;height:24px;text-decoration:none;line-height:24px;color:#000;} #macstyle ul.tag_options li.open_hover{background:transparent url("/jscss/demoimg/200907/mac-select.gif") no-repeat -162px 0;color:#000} #macstyle ul.tag_options li.open_selected{background:transparent url("/jscss/demoimg/200907/mac-select.gif") no-repeat -162px -24px;color:#fff} #tm2008style div.tag_select{display:block;color:#000;width:82px;height:22px;background:transparent url("/jscss/demoimg/200907/tm2008-select.gif") no-repeat 0 0;padding:0 10px;line-height:22px;} #tm2008style div.tag_select_hover{display:block;color:#000;width:82px;height:22px;background:transparent url("/jscss/demoimg/200907/tm2008-select.gif") no-repeat 0 -22px;padding:0 10px;line-height:22px;} #tm2008style div.tag_select_open{display:block;color:#000;width:82px;height:22px;background:transparent url("/jscss/demoimg/200907/tm2008-select.gif") no-repeat 0 -44px;padding:0 10px;line-height:22px;} #tm2008style ul.tag_options{position:absolute;margin:0;list-style:none;background:transparent url("/jscss/demoimg/200907/tm2008-select.gif") no-repeat left bottom;width:100px;padding:0 0 1px;margin:0;width:80px;} #tm2008style ul.tag_options li{background:transparent url("/jscss/demoimg/200907/tm2008-select.gif") repeat-y -102px 0;display:block;width:61px;padding:0 10px;height:22px;text-decoration:none;line-height:22px;color:#000;} #tm2008style ul.tag_options li.open_hover{background:transparent url("/jscss/demoimg/200907/tm2008-select.gif") no-repeat 0 -88px;color:#000} #tm2008style ul.tag_options li.open_selected{background:transparent url("/jscss/demoimg/200907/tm2008-select.gif") no-repeat 0 -66px;color:#19555F}</style> <mce:script type="text/javascript"></mce:script> </head> <body> <form id="form" name="form" method="post" action=""> <br /><br /> <div id="uboxstyle"> <h3 style="color:#6D93AB;font-size:14px;" mce_style="color:#6D93AB;font-size:14px;">U-Box Style</h3> <select name="language" id="language"> <option value="English" selected="selected">English</option> <option value="简体中文" >简体中文</option> <option value="日本語" >日本語</option> <option value="Deutsch" >Deutsch</option> <option value="Español" >Español</option> <option value="Polski" >Polski</option> <option value="Português" >Português</option> <option value="Svenska" >Svenska</option> </select> </div> <br /><br /> <h3 style="color:#6D93AB;font-size:14px;" mce_style="color:#6D93AB;font-size:14px;">Mac Style</h3> <div id="macstyle"> <select name="language_mac" id="language_mac"> <option value="English" selected="selected">English</option> <option value="简体中文" >简体中文</option> <option value="日本語" >日本語</option> <option value="Deutsch" >Deutsch</option> <option value="Italiano" >Italiano</option> <option value="Polski" >Polski</option> <option value="Português" >Português</option> <option value="Svenska" >Svenska</option> </select> </div> <br /><br /> <h3 style="color:#6D93AB;font-size:14px;" mce_style="color:#6D93AB;font-size:14px;">TM2008 Style</h3> <div id="tm2008style"> <select name="language_tm2008" id="language_tm2008"> <option value="English">English</option> <option value="简体中文" >简体中文</option> <option value="日本語" >日本語</option> <option value="Français" >Français</option> <option value="Italiano" >Italiano</option> <option value="Polski" >Polski</option> <option value="Português" >Português</option> <option value="Svenska" >Svenska</option> </select> </div> </form> </body> </html>

代码中引用的图片

background:transparent url("/jscss/demoimg/200907/ubox-select.gif")

background:transparent url("/jscss/demoimg/200907/mac-select.gif")

不存在，导致显示结果有所差异！