首页
所有分类
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 相关文章推荐
Jquery时间验证和转换工具小例子
Jul 01 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
Aug 29 Javascript
JavaScript判断DIV内容是否为空的方法
Jan 29 Javascript
HTML5 canvas 9绘制图片实例详解
Sep 06 Javascript
详解JSON1：使用TSQL查询数据和更新JSON数据
Nov 21 Javascript
原生js实现焦点轮播图效果
Jan 12 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
vue修改vue项目运行端口号的方法
Aug 04 Javascript
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
JavaScript运行原理分析
Feb 09 Javascript
JavaScript多种滤镜算法实现代码实例
Dec 10 Javascript
解决echarts数据二次渲染不成功的问题
Jul 20 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) delete in(1) 字段分割(1) 查询效率(1) 控制流(1) RecyclerView(1) 表结构(1) REGEXP(1) Simhash(1) Hadoop(1)
You might like
上海地方志办公室－上海电子仪表工业志
2021/03/04 无线电
Windows下PHP的任意文件执行漏洞
2006/10/09 PHP
php 设计模式之 单例模式
2008/12/19 PHP
PHP面向对象程序设计之类常量用法实例
2014/08/20 PHP
详解PHP如何更好的利用PHPstorm的自动提示
2017/08/18 PHP
PHP的mysqli_stmt_init()函数讲解
2019/01/24 PHP
PHP实现微信提现（企业付款到零钱）
2019/08/01 PHP
JS+CSS实现下拉列表框美化效果（3款）
2015/08/15 Javascript
Javascript获取图片原始宽度和高度的方法详解
2016/09/20 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
2016/12/17 Javascript
JS实现的表头列头固定页面功能示例
2017/01/10 Javascript
JS完成画圆圈的小球
2017/03/07 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
2017/11/15 Javascript
详解如何在vue项目中引入elementUI组件
2018/02/11 Javascript
解决Layui中layer报错的问题
2019/09/03 Javascript
jquery实现简单每周轮换的日历
2020/09/10 jQuery
忘记ftp密码使用python ftplib库暴力破解密码的方法示例
2014/01/22 Python
numpy找出array中的最大值,最小值实例
2018/04/03 Python
Python os.access()用法实例
2019/02/18 Python
详解Python3序列赋值、序列解包
2019/05/14 Python
python中的反斜杠问题深入讲解
2019/08/12 Python
15个Pythonic的代码示例(值得收藏)
2020/10/29 Python
css3的动画特效之动画序列（animation）
2017/12/22 HTML / CSS
Sephora丝芙兰马来西亚官方网站：国际化妆品购物
2018/03/15 全球购物
JSF如何进行表格处理及取值
2012/08/06 面试题
英语专业毕业个人求职自荐信
2013/09/21 职场文书
社会实践自我鉴定
2013/11/07 职场文书
高级电工工作职责
2013/11/21 职场文书
正规的求职信范文分享
2013/12/11 职场文书
2014小学一年级班主任工作总结
2014/12/05 职场文书
2015年全国爱耳日活动总结
2015/02/27 职场文书
自主招生自荐信范文
2015/03/04 职场文书
企业培训简报范文
2015/07/20 职场文书
幼儿园小班教育随笔
2015/08/14 职场文书
小学五年级班主任工作经验交流材料
2015/11/02 职场文书
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python