JS+CSS实现下拉列表框美化效果(3款)

 更新时间:2015年08月15日 16:54:40   投稿:lijiao  
这篇文章主要介绍了JS+CSS实现美化的下拉列表框效果,涉及javascript针对下拉列表框样式的相关操作技巧,三款下拉菜单简单大方,需要的朋友可以参考下

本文实例讲述了JS+CSS实现美化的下拉列表框效果。分享给大家供大家参考。具体如下:

三款款经过JS+CSS美化的下拉列表,效果很不错,总有一款适合你,先看看运行效果图:

效果查看 源码下载

具体代码如下:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
 @import url(css/select2css.css);
-->
</style>
<script type="text/javascript" src="js/select2css.js"></script>
</head>
<body>
<form id="form" name="form" method="post" action="">
 <br />
<div id="uboxstyle">
<h3 style="color:#6D93AB;font-size:14px;">U-Box Style</h3>
 <select name="language" id="language">
 <option value="English" selected="selected">Chinese</option>
 <option value="简体中文" >简体中文</option>
 <option value="Deutsch" >Deutsch</option>
 <option value="Espa?ol" >Espa?ol</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>
 <option value="Türk?e" >Türk?e</option>
 <option value="Руccкий" >Руccкий</option>
 </select>
</div>
<br /><br />
<h3 style="color:#6D93AB;font-size:14px;">Mac Style</h3>
<div id="macstyle">
 <select name="language_mac" id="language_mac">
 <option value="English" selected="selected">Chinese</option>
 <option value="简体中文" >简体中文</option>
 <option value="Deutsch" >Deutsch</option>
 <option value="Espa?ol" >Espa?ol</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>
 <option value="Türk?e" >Türk?e</option>
 <option value="Руccкий" >Руccкий</option>
 </select>
</div>
<br /><br />
<h3 style="color:#6D93AB;font-size:14px;">TM2008 Style</h3>
<div id="tm2008style">
 <select name="language_tm2008" id="language_tm2008">
 <option value="English">Chinese</option>
 <option value="简体中文" >简体中文</option>
 <option value="Deutsch" >Deutsch</option>
 <option value="Espa?ol" >Espa?ol</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>
 <option value="Türk?e" >Türk?e</option>
 <option value="Руccкий" >Руccкий</option>
 </select>
</div>
</form>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

相关文章

  • JavaScript动态修改网页元素内容的方法

    JavaScript动态修改网页元素内容的方法

    这篇文章主要介绍了JavaScript动态修改网页元素内容的方法,实例分析了javascript操作html元素的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • 如何只用echarts做个仿3d地图功能

    如何只用echarts做个仿3d地图功能

    由于业务需求,需要绘制3d地图,所以下面这篇文章主要给大家介绍了关于如何只用echarts做个仿3d地图功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • echarts 移动端竖着显示效果实现

    echarts 移动端竖着显示效果实现

    这篇文章主要为大家介绍了echarts 移动端竖着显示效果实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • json前后端数据交互相关代码

    json前后端数据交互相关代码

    本篇文章给大家分享了关于json前后端数据交互方法实现的相关知识点内容,有兴趣的读者们可以参考学习下。
    2018-09-09
  • 使用defer和async实现高效加载JavaScript

    使用defer和async实现高效加载JavaScript

    async和defer都是异步加载脚本,但async是加载完脚本后立即执行,而defer是在HTML解析完成后再执行脚本,本文给大家介绍了如何使用defer和async高效加载JavaScript,文中通过代码和图文讲解的非常详细,需要的朋友可以参考下
    2024-06-06
  • js实现跨域的几种方法汇总(图片ping、JSONP和CORS)

    js实现跨域的几种方法汇总(图片ping、JSONP和CORS)

    平时用惯了jQuery.ajax之类的方法,却时常忽略了它背后的实现,本文是学习了AJAX基础及几种跨域解决方案之后的一些收获。
    2015-10-10
  • 小程序scroll-view组件实现滚动的示例代码

    小程序scroll-view组件实现滚动的示例代码

    这篇文章主要介绍了小程序scroll-view组件实现滚动的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • jquery获取URL中参数解决中文乱码问题的两种方法

    jquery获取URL中参数解决中文乱码问题的两种方法

    从A页面通过url传参到B页面时,获取URL中参数出现中文乱码问题,解析url参数的正确方法如下,感兴趣的朋友可以参考下
    2013-12-12
  • 使用js操作css实现js改变背景图片示例

    使用js操作css实现js改变背景图片示例

    有个朋友在weibo上问我可不可以用JS和CSS让页面每次刷新随机产生一张背景图,当然是可以的。具体的方法看下面的实现代码吧
    2014-03-03
  • js实现产品缩略图效果

    js实现产品缩略图效果

    本文主要介绍了js实现产品缩略图效果的实例。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03

最新评论