首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onAugust 15, 2015

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

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

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

效果查看 源码下载

具体代码如下：

<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程序设计有所帮助。

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

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript 表单的友好用户体现
Jan 07 Javascript
jquery下利用jsonp跨域访问实现方法
Jul 29 Javascript
jQuery Tab插件 用于在Tab中显示iframe，附源码和详细说明
Jun 27 Javascript
js关闭子窗体刷新父窗体实现方法
Dec 04 Javascript
jQuery 获取和设置select下拉框的值实现代码
Nov 08 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
Aug 24 Javascript
使用jquery给新生的th绑定hover事件的实例
Feb 10 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
Mar 01 Javascript
js动态设置select下拉菜单的默认选中项实例
Aug 21 Javascript
详解iframe跨域的几种常用方法(小结)
Apr 29 Javascript
JavaScript 禁止用户保存图片的实现代码
Apr 28 Javascript
JS替换字符串中指定位置的字符(多种方法)
May 28 Javascript
js时钟翻牌效果实现代码分享
Jul 31 #Javascript
js实现点击文本框显示日期选择器特效代码分享
May 21 #Javascript
jQuery树形下拉菜单特效代码分享
Aug 15 #Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式（3）
Aug 15 #Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换（2）
Nov 18 #Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换（1）
Aug 15 #Javascript
js漂浮广告实现代码
Aug 15 #Javascript
事迹材料(636) 广播稿(323) 表扬信(62) 辞职信(98) 检讨书(456) 感言(394) 证明书(326) 教学反思(909) 方案(1080) 邀请函(127)
You might like
记录mysql性能查询过程的使用方法
2013/05/02 PHP
win7下memCache的安装过程(具体操作步骤)
2013/06/28 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
jquery的键盘事件修改代码
2011/02/24 Javascript
最短的IE判断代码
2011/03/13 Javascript
使用js获取图片原始尺寸
2014/12/03 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
2017/04/13 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
2017/09/25 Javascript
Nginx 配置多站点vhost 的方法
2018/01/07 Javascript
Node批量爬取头条视频并保存方法
2018/09/20 Javascript
Iview Table组件中各种组件扩展的使用
2018/10/20 Javascript
vue项目添加多页面配置的步骤详解
2019/05/22 Javascript
JS中==、===你分清楚了吗
2020/03/04 Javascript
JavaScript利用键盘码控制div移动
2020/03/19 Javascript
JavaScript中的函数式编程详解
2020/08/22 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
2020/09/21 Javascript
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
微信小程序入门之指南针
2020/10/22 Javascript
[51:53]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第二场 1月24日
2021/03/11 DOTA
简单介绍Python中的readline()方法的使用
2015/05/24 Python
深入解析Python设计模式编程中建造者模式的使用
2016/03/02 Python
Python爬虫框架Scrapy实例代码
2018/03/04 Python
Python 运行 shell 获取输出结果的实例
2019/01/07 Python
html2canvas生成清晰的图片实现打印的示例代码
2019/09/30 HTML / CSS
美国东北部户外服装和设备零售商：Eastern Mountain Sports
2016/10/05 全球购物
澳大利亚和新西兰最大的在线旅行社之一：Aunt Betty
2019/08/07 全球购物
应届生高等护理求职信
2013/10/12 职场文书
致百米运动员广播稿
2014/01/29 职场文书
农村婚庆司仪主持词
2014/03/15 职场文书
政府采购方案
2014/06/12 职场文书
艺术节开幕词
2015/01/28 职场文书
学生检讨书怎么写
2015/05/07 职场文书
Python极值整数的边界探讨分析
2021/09/15 Python
Vue OpenLayer测距功能的实现
2022/04/20 Vue.js
win10如何更改appdata文件夹的默认位置?
2022/07/15 数码科技
js 实现验证码输入框示例详解
2022/09/23 Javascript