编程 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 相关文章推荐

toString()一个会自动调用的方法

Feb 08 Javascript

qTip 基于JQuery的Tooltip插件[兼容性好]

Sep 01 Javascript

JavaScript游戏之是男人就下100层代码打包

Nov 08 Javascript

javascript学习笔记（九）javascript中的原型(prototype)及原型链的继承方式

Apr 12 Javascript

onkeydown事件解决按回车键直接提交数据的需求

Apr 11 Javascript

JavaScript 正则表达式中global模式的特性

Feb 25 Javascript

详解JS正则replace的使用方法

Mar 06 Javascript

微信js-sdk界面操作接口用法示例

Oct 12 Javascript

node.js利用redis数据库缓存数据的方法

Mar 01 Javascript

解决vue单页使用keep-alive页面返回不刷新的问题

Mar 13 Javascript

微信小程序全选多选效果实现代码解析

Jan 21 Javascript

vue中封装axios并实现api接口的统一管理

Dec 25 Vue.js

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检测文件编码的函数

2014/04/21 PHP

php画图实例

2014/11/05 PHP

服务器上配置PHP运行环境教程

2015/02/12 PHP

基于PHP如何把汉字转化为拼音

2015/12/11 PHP

Symfony2实现在doctrine中内置数据的方法

2016/02/05 PHP

优化 JavaScript 代码的方法小结

2009/07/16 Javascript

jquery ui resizable bug解决方法

2010/10/26 Javascript

JS等比例缩小图片尺寸的实例

2013/02/27 Javascript

按Enter键触发事件的jquery方法实现代码

2014/02/17 Javascript

JS合并数组的几种方法及优劣比较

2014/09/19 Javascript

js动态创建及移除div的方法

2015/06/03 Javascript

jQuery实现表格行上下移动和置顶效果

2015/06/05 Javascript

Javascript中this绑定的3种方法与比较

2016/10/13 Javascript

使用jquery.qrcode.js生成二维码插件

2016/10/17 Javascript

node.js利用redis数据库缓存数据的方法

2017/03/01 Javascript

Javascript中click与blur事件的顺序详析

2017/04/25 Javascript

trackingjs+websocket+百度人脸识别API实现人脸签到

2018/11/26 Javascript

vue在自定义组件中使用v-model进行数据绑定的方法

2019/03/25 Javascript

JS 获取文件后缀，判断文件类型(比如是否为图片格式)

2020/05/09 Javascript

学前端,css与javascript重难点浅析

2020/06/11 Javascript

[41:11]完美世界DOTA2联赛PWL S2 Inki vs Magma 第一场 11.22

2020/11/24 DOTA

利用Python将数值型特征进行离散化操作的方法

2018/11/06 Python

Python实现的排列组合、破解密码算法示例

2019/04/12 Python

python 负数取模运算实例

2020/06/03 Python

html5的新玩法——语音搜索

2013/01/03 HTML / CSS

蔻驰法国官网：COACH法国

2018/11/14 全球购物

幼儿园大班新学期寄语

2014/01/18 职场文书

公司门卫管理制度

2014/02/01 职场文书

大学社团招新的通讯稿

2014/09/10 职场文书

声乐专业大学生职业生涯规划书：理想的未来需要自己去打造

2014/09/20 职场文书

2016年保险公众宣传日活动总结

2016/04/05 职场文书

一个成功的互联网创业项目，必须满足这些要求

2019/08/23 职场文书

如何用python绘制雷达图

2021/04/24 Python

使用Python脚本对GiteePages进行一键部署的使用说明

2021/05/27 Python

MySQL Innodb索引机制详细介绍

2021/11/23 MySQL

MySQL 表锁定 LOCK和UNLOCK TABLES的 SQL语法

2022/04/18 MySQL