脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS+CSS实现下拉列表框美化效果

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通过select动态更换图片的方法

    JavaScript通过select动态更换图片的方法

    这篇文章主要介绍了JavaScript通过select动态更换图片的方法,涉及javascript动态操作图片src的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • 图文详解Javascript中的上下文和作用域

    图文详解Javascript中的上下文和作用域

    这篇文章通过图文详细的给大家介绍了关于Javascript中的上下文与作用域背后的机制，主要涉及到执行上下文（execution context）、作用域链（scope chain）、闭包（closure）、this等概念。需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-02-02
  • BootStrap selectpicker后台动态绑定数据的方法

    BootStrap selectpicker后台动态绑定数据的方法

    这篇文章主要为大家详细介绍了BootStrap selectpicker后台动态绑定数据的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-07-07
  • 微信小程序入门教程

    微信小程序入门教程

    本篇文章主要介绍了微信小程序入门教程，现在分享给大家，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
    2016-11-11
  • JavaScript实现点击按钮直接打印

    JavaScript实现点击按钮直接打印

    很多网站都有此功能，当浏览到底部时都会有一个打印按钮，点击打印按钮就可以完成打印功能，功能非常不错，人性化，下面通过本文给大家介绍JavaScript实现点击按钮就打印的代码，需要的朋友参考下
    2016-01-01
  • JS 实现导航菜单中的二级下拉菜单的几种方式

    JS 实现导航菜单中的二级下拉菜单的几种方式

    这篇文章主要介绍了JS 实现导航菜单中的二级下拉菜单的几种方式的相关资料,这里提供了三种方式，和实例代码，需要的朋友可以参考下
    2016-10-10
  • js 获取时间间隔实现代码

    js 获取时间间隔实现代码

    获取时间间隔在日常使用还是比价频繁的，下面是具体的实现代码，需要的朋友可以参考下
    2014-05-05
  • 解决layer弹出层自适应页面大小的问题

    解决layer弹出层自适应页面大小的问题

    今天小编就为大家分享一篇解决layer弹出层自适应页面大小的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 浅析JavaScript回调函数应用

    浅析JavaScript回调函数应用

    这篇文章主要为大家详细介绍了JavaScript回调函数应用，感兴趣的朋友可以参考一下
    2016-05-05
  • 原生JS与CSS实现软件卸载对话框功能

    原生JS与CSS实现软件卸载对话框功能

    今天给大家分享一个特别有意思的软件卸载对话框功能，本段代码是基于js 与css实现的，感兴趣的朋友跟随小编一起看看吧
    2019-12-12

最新评论