首页
所有分类
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 相关文章推荐
fromCharCode和charCodeAt 方法
Dec 27 Javascript
网页开发中的容易忽略的问题 javascript HTML中的table
Apr 15 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
Mar 04 Javascript
javascript验证身份证完全方法具体实现
Nov 18 Javascript
深入理解javascript严格模式(Strict Mode)
Nov 28 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
Dec 08 Javascript
JavaScript中常见的字符串操作函数及用法汇总
May 04 Javascript
微信小程序 scroll-view组件实现列表页实例代码
Dec 14 Javascript
js实现日期显示的一些操作(实例讲解)
Jul 27 Javascript
JavaScript模块详解
Dec 18 Javascript
vue 实现特定条件下绑定事件
Nov 09 Javascript
vue实现移动端H5数字键盘组件使用详解
Aug 25 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
智利购物网站(5) 秘鲁购物网站(1) 北美洲购物网站(1) 新西兰购物网站(42) 菲律宾购物网站(13) 沙特阿拉伯购物网站(9) 卡塔尔购物网站(3) 捷克购物网站(26) 匈牙利购物网站(11) 斯洛伐克购物网站(7)
You might like
4.与数据库的连接
2006/10/09 PHP
Thinkphp中数据按分类嵌套循环实现方法
2014/10/30 PHP
php基于单例模式封装mysql类完整实例
2016/10/18 PHP
PHP解决高并发的优化方案实例
2020/12/10 PHP
Jquery插件 easyUI属性汇总
2011/01/19 Javascript
event.X和event.clientX的区别分析
2011/10/06 Javascript
javascript去掉代码里面的注释
2015/07/24 Javascript
jQuery ajaxForm()的应用
2016/10/14 Javascript
nodejs处理图片的中间件node-images详解
2017/05/08 NodeJs
ES6解构赋值的功能与用途实例分析
2017/10/31 Javascript
原生js调用json方法总结
2018/02/22 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
2018/07/09 Javascript
vue子路由跳转实现tab选项卡
2019/07/24 Javascript
layui表格数据复选框回显设置方法
2019/09/13 Javascript
微信小程序文章详情功能完整实例
2020/06/03 Javascript
如何在面试中手写出javascript节流和防抖函数
2020/10/22 Javascript
举例详解Python中的split()函数的使用方法
2015/04/07 Python
Python中函数的参数传递与可变长参数介绍
2015/06/30 Python
Python分支语句与循环语句应用实例分析
2019/05/07 Python
python Django编写接口并用Jmeter测试的方法
2019/07/31 Python
python实现爬虫抓取小说功能示例【抓取金庸小说】
2019/08/09 Python
python 画函数曲线示例
2019/12/04 Python
python属于解释语言吗
2020/06/11 Python
美国最值得信赖的宠物药房：Allivet
2019/03/23 全球购物
青年创业培训欢迎词
2014/01/08 职场文书
会议接待欢迎词
2014/01/12 职场文书
测量工程专业求职信
2014/02/24 职场文书
酒后驾车标语
2014/06/30 职场文书
2014年监理个人工作总结
2014/12/11 职场文书
2015出纳试用期工作总结
2014/12/12 职场文书
电力工程合作意向书
2015/05/11 职场文书
2015年社区流动人口工作总结
2015/05/12 职场文书
专项资金申请报告
2015/05/15 职场文书
未来，这5大方向都很适合创业
2019/07/22 职场文书
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript
nginx配置之并发频次限制
2022/04/18 Servers