首页
所有分类
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 相关文章推荐
事件绑定之小测试  onclick &amp;&amp; addEventListener
Jul 31 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
Sep 20 Javascript
jQuery 仿百度输入标签插件附效果图
Jul 04 Javascript
浅谈JavaScript异常处理语句
Jun 26 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
Feb 18 Javascript
JS一个简单的注册页面实例
Sep 05 Javascript
vue+axios 前端实现的常用拦截的代码示例
Aug 23 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
Dec 13 Javascript
JS查找孩子节点简单示例
Jul 25 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
Nov 05 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
Dec 10 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
FM(4) LW(1) 发报机(1) SWL(1) 电磁辐射(1) 调频(4) GWEN(1) SW(1) 调幅(1) ad hoc(1)
You might like
php 学习资料零碎东西
2010/12/04 PHP
Laravel validate error处理,ajax,json示例
2019/10/25 PHP
跟着JQuery API学Jquery 之二 属性
2010/04/09 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/03 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
2012/02/03 Javascript
使用js写的一个简易的投票
2013/11/27 Javascript
利用进制转换压缩数字函数分享
2014/01/02 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
2015/06/04 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
2016/06/20 Javascript
JavaScript中值类型和引用类型的区别
2017/02/23 Javascript
利用babel将es6语法转es5的简单示例
2017/12/01 Javascript
详解javascript中的Error对象
2019/04/25 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
Python实现的矩阵类实例
2017/08/22 Python
Python输入二维数组方法
2018/04/13 Python
解决python中使用PYQT时中文乱码问题
2019/06/17 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
Lookfantastic挪威官网：英国知名美妆购物网站
2017/07/26 全球购物
全球速卖通：AliExpress（国际版淘宝）
2017/09/20 全球购物
100%法国制造的游戏和玩具：Les Jouets Français
2021/03/02 全球购物
如何删除一个表里面的重复行
2013/07/13 面试题
国际会议邀请函范文
2014/01/16 职场文书
元旦晚会邀请函
2014/02/01 职场文书
美容院营销方案
2014/03/05 职场文书
党课心得体会范文
2014/09/09 职场文书
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书
干部年终考核评语
2015/01/04 职场文书
2015年党风廉政建设责任书
2015/01/29 职场文书
中学教师师德师风承诺书
2015/04/28 职场文书
预备党员党支部意见
2015/06/02 职场文书
2015年中秋寄语
2015/07/31 职场文书
适合青年人白手起家的创业项目分享
2019/08/16 职场文书
Python实现仓库管理系统
2022/05/30 Python
Go调用Rust方法及外部函数接口前置
2022/06/14 Golang