编程 Javascript

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

Posted in Javascript onAugust 15, 2015

本文实例讲述了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程序设计有所帮助。

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

- Author -

lijiao

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

Javascript 相关文章推荐

Javascript客户端将指定区域导出到Word、Excel的代码

Oct 22 Javascript

让html页面不缓存js的实现方法

Oct 31 Javascript

在Node.js中使用HTTP上传文件的方法

Jun 23 Javascript

js闭包引起的事件注册问题介绍

Mar 29 Javascript

修改Jquery Dialog 位置的实现方法

Aug 26 Javascript

jQuery Ajax请求后台数据并在前台接收

Dec 10 Javascript

Vue.js 2.0中select级联下拉框实例

Mar 06 Javascript

深入理解ES6学习笔记之块级作用域绑定

Aug 19 Javascript

webpack多入口多出口的实现方法

Aug 17 Javascript

微信小程序调用微信授权窗口相关问题解决

Jul 25 Javascript

Vue实现base64编码图片间的切换功能

Dec 04 Javascript

前端JS获取URL参数的4种方法总结

Apr 05 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

You might like

PHP实现UTF-8文件BOM自动检测与移除实例

2014/11/05 PHP

php实现解析xml并生成sql语句的方法

2018/02/03 PHP

PHP JWT初识及其简单示例

2018/10/10 PHP

基于Jquery的文字自动截取（提供源代码）

2011/08/09 Javascript

eclipse如何忽略js文件报错(附图)

2013/10/30 Javascript

JavaScript设置body高度为浏览器高度的方法

2015/02/09 Javascript

JavaScript获取表单内所有元素值的方法

2015/04/02 Javascript

js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)

2016/03/09 Javascript

每日十条JavaScript经验技巧(一)

2016/06/23 Javascript

利用vue写todolist单页应用

2016/12/15 Javascript

Angularjs处理页面闪烁的解决方法

2017/03/09 Javascript

Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)

2017/05/09 Javascript

Vue实现一个返回顶部backToTop组件

2017/07/25 Javascript

vue实现裁切图片同时实现放大、缩小、旋转功能

2018/03/02 Javascript

vue中动态设置meta标签和title标签的方法

2018/07/11 Javascript

chosen实现省市区三级联动

2018/08/16 Javascript

JS获取月的第几周和年的第几周实例代码

2018/12/05 Javascript

JavaScript多种图形实现代码实例

2020/06/28 Javascript

Vue父子组件传值的一些坑

2020/09/16 Javascript

python3.6连接MySQL和表的创建与删除实例代码

2017/12/28 Python

Python找出微信上删除你好友的人脚本写法

2018/11/01 Python

python实现修改固定模式的字符串内容操作示例

2019/12/30 Python

html5手机端页面可以向右滑动导致样式受影响的问题

2018/06/20 HTML / CSS

英国现代市场：ARKET

2019/04/10 全球购物

碧欧泉法国官网：Biotherm法国

2019/10/23 全球购物

高中数学教师求职信

2013/10/30 职场文书

高校十八大报告感想

2014/01/27 职场文书

名人演讲稿范文

2014/09/16 职场文书

优秀学生干部事迹材料

2014/12/24 职场文书

报名委托书

2015/01/29 职场文书

公司财务部岗位职责

2015/04/14 职场文书

入党积极分子半年考察意见

2015/06/02 职场文书

小学四年级班主任工作经验交流材料

2015/11/02 职场文书

2016年父亲节寄语

2015/12/04 职场文书

利用 SQL Server 过滤索引提高查询语句的性能分析

2021/07/15 SQL Server

JavaScript严格模式不支持八进制的问题讲解

2021/11/07 Javascript