首页
所有分类
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创建一个新的节点对象(自定义结构/内容)的好方法
Jan 21 Javascript
setInterval计时器不准的问题解决方法
May 08 Javascript
JavaScript获取对象在页面中位置坐标的方法
Feb 03 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
Aug 28 Javascript
jQuery利用sort对DOM元素进行排序操作
Nov 07 Javascript
浅谈vue-lazyload实现的详细过程
Aug 22 Javascript
Vue实例中生命周期created和mounted的区别详解
Aug 25 Javascript
使用命令行工具npm新创建一个vue项目的方法
Dec 27 Javascript
Vue 项目代理设置的优化
Apr 17 Javascript
Vue中使用vux配置代码详解
Sep 16 Javascript
vue通过style或者class改变样式的实例代码
Oct 30 Javascript
vue 导航内容设置选中状态样式的例子
Nov 01 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
发报机(1) 短波(1) SW(1) FM(4) 调幅(1) 电路图(1) 电台(1) LW(1) SWL(1) 电磁辐射(1)
You might like
用PHP连接MySQL代码的参数说明
2008/06/07 PHP
PHP 飞信好友免费短信API接口开源版
2010/07/22 PHP
php中多维数组按指定value排序的实现代码
2014/08/19 PHP
动态为事件添加js代码示例
2009/02/15 Javascript
javascript 获取所有id中包含某关键字的控件的实现代码
2010/11/25 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
2011/10/13 Javascript
javascript中的if语句使用介绍
2013/11/20 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
2014/03/19 Javascript
jQuery响应enter键的实现思路
2014/04/18 Javascript
js+css实现tab菜单切换效果的方法
2015/01/20 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
javascript 动态样式添加的简单实现
2016/10/11 Javascript
js replace 全局替换的操作方法
2018/06/12 Javascript
vue实现的双向数据绑定操作示例
2018/12/04 Javascript
基于node简单实现RSA加解密的方法步骤
2019/03/21 Javascript
Vue 之孙组件向爷组件通信的实现
2019/04/23 Javascript
使用react context 实现vue插槽slot功能
2019/07/18 Javascript
微信小程序轮播图swiper代码详解
2020/12/01 Javascript
使用Python判断IP地址合法性的方法实例
2014/03/13 Python
python调用API实现智能回复机器人
2018/04/10 Python
python linecache 处理固定格式文本数据的方法
2019/01/08 Python
Python爬虫简单运用爬取代理IP的实现
2020/12/01 Python
css3 iphone玻璃透明气泡完美实现
2013/03/20 HTML / CSS
html5使用canvas绘制一张图片
2014/12/15 HTML / CSS
实例讲解利用HTML5 Canvas API操作图形旋转的方法
2016/03/22 HTML / CSS
来自全球大都市的高级街头服饰：Pegador
2018/01/03 全球购物
高尔夫球鞋、服装、手套和装备：FootJoy
2018/12/15 全球购物
机械设计及其自动化专业推荐信
2013/10/31 职场文书
弘扬雷锋精神活动演讲稿
2014/03/04 职场文书
学前班学生评语
2014/12/29 职场文书
委托公证书样本
2015/01/23 职场文书
地道战观后感500字
2015/06/04 职场文书
公司人事管理制度
2015/08/05 职场文书
读《推着妈妈去旅行》有感1500字
2019/10/15 职场文书
教你漂亮打印Pandas DataFrames和Series
2021/05/29 Python
Python中Numpy和Matplotlib的基本使用指南
2021/11/02 Python