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

关于Blog顶部的滚动导航条代码

Sep 25 Javascript

jquery ui resizable bug解决方法

Oct 26 Javascript

javascript验证只能输入数字和一个小数点示例

Oct 21 Javascript

javascript框架设计读书笔记之字符串的扩展和修复

Dec 02 Javascript

Javascript核心读书有感之语言核心

Feb 01 Javascript

JavaScript获取键盘按键的键码(参照表)

Jan 10 Javascript

vue中echarts3.0自适应的方法

Feb 26 Javascript

Puppeteer 爬取动态生成的网页实战

Nov 14 Javascript

微信小程序dom操作的替代思路实例分析

Dec 06 Javascript

深入浅出vue图片路径的实现

Sep 04 Javascript

JS实现简单打字测试

Jun 24 Javascript

Vue中父子组件的值传递与方法传递

Sep 28 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

javascript中常用编程知识

2013/04/08 Javascript

Jquery动态改变图片IMG的src地址示例

2013/06/25 Javascript

Javascript 按位左移运算符使用介绍(

2014/02/04 Javascript

JavaScript DOM事件(笔记)

2015/04/08 Javascript

jquery选择器中的空格与大于号>、加号+与波浪号~的区别介绍

2016/06/24 Javascript

解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题

2017/03/09 Javascript

JavaScript 程序错误Cannot use 'in' operator to search的解决方法

2017/07/10 Javascript

javaScript实现滚动条事件详解

2020/03/24 Javascript

AngularJs用户登录问题处理（交互及验证、阻止FQ处理）

2017/10/26 Javascript

node.js用fs.rename强制重命名或移动文件夹的方法

2017/12/27 Javascript

vue实现模态框的通用写法推荐

2018/02/26 Javascript

11个教程中不常被提及的JavaScript小技巧（推荐）

2019/04/17 Javascript

layui下拉列表select实现可输入查找的方法

2019/09/28 Javascript

详解Vue之事件处理

2020/07/10 Javascript

Vuex实现简单购物车

2021/01/10 Vue.js

Python中方法链的使用方法

2016/02/23 Python

Python进阶之递归函数的用法及其示例

2018/01/31 Python

Python3+django2.0+apache2+ubuntu14部署网站上线的方法

2018/07/07 Python

Python实现端口检测的方法

2018/07/24 Python

django 中的聚合函数，分组函数，F 查询，Q查询

2019/07/25 Python

Python提取视频中图片的示例（按帧、按秒）

2020/10/22 Python

pytorch 移动端部署之helloworld的使用

2020/10/30 Python

飞利浦法国官网：Philips法国

2019/07/10 全球购物

几个常见的消息中间件(MOM)

2014/01/08 面试题

教师网络培训感言

2014/03/09 职场文书

个人委托书格式

2014/04/04 职场文书

2014党员自我评议表范文

2014/09/20 职场文书

2014学生会工作总结报告

2014/12/02 职场文书

2014年党小组工作总结

2014/12/20 职场文书

六一儿童节新闻稿

2015/07/17 职场文书

新闻报道稿范文

2015/07/23 职场文书

关于环保的宣传稿

2015/07/23 职场文书

大学组织委员竞选稿

2015/11/21 职场文书

SQL Server基本使用和简单的CRUD操作

2021/04/05 SQL Server

postgresql无序uuid性能测试及对数据库的影响

2021/06/11 PostgreSQL

python游戏开发Pygame框架

2022/04/22 Python