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

发一个自己用JS写的实用看图工具实现代码

Jul 26 Javascript

Mootools 1.2教程排序类和方法简介

Sep 15 Javascript

Js实现网页键盘控制翻页的方法

Oct 30 Javascript

使用Javascript简单实现图片无缝滚动

Dec 05 Javascript

js判断文本框剩余可输入字数的方法

Feb 04 Javascript

jquery中EasyUI使用技巧小结

Feb 10 Javascript

悬浮广告方法日常收集整理

Mar 18 Javascript

jQuery实现左侧导航模块的显示与隐藏效果

Jul 04 Javascript

express如何使用session与cookie的方法

Jan 30 Javascript

微信小程序rich-text富文本用法实例分析

May 20 Javascript

vue store之状态管理模式的详细介绍

Jun 13 Javascript

node.js处理前端提交的GET请求

Aug 30 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

什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)

2021/03/01 无线电

jquery 回车事件实现代码

2011/08/23 Javascript

Jquery zTree 树控件异步加载操作

2016/02/25 Javascript

JS随机洗牌算法之数组随机排序

2016/03/23 Javascript

JavaScript学习笔记之创建对象

2016/03/25 Javascript

AngularJS在IE8的不支持的解决方法

2016/05/13 Javascript

微信小程序 Audio API详解及实例代码

2016/09/30 Javascript

jQuery拖拽通过八个点改变div大小

2020/11/29 Javascript

详解IWinter 一个路由转控制器的 Nodejs 库

2017/11/15 NodeJs

Node.js成为Web应用开发最佳选择的原因

2018/02/05 Javascript

浅谈node.js 命令行工具(cli)

2018/05/10 Javascript

详解webpack的proxyTable无效的解决方案

2018/06/15 Javascript

JS实现关闭小广告特效

2021/01/29 Javascript

vue 在单页面应用里使用二级套嵌路由

2020/12/19 Vue.js

[50:21]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第二场

2018/08/19 DOTA

centos 下面安装python2.7 +pip +mysqld

2014/11/18 Python

解决pycharm无法调用pip安装的包问题

2018/05/18 Python

python面试题之列表声明实例分析

2019/07/08 Python

Python使用微信接入图灵机器人过程解析

2019/11/04 Python

django models里数据表插入数据id自增操作

2020/07/15 Python

Html5新增标签与样式及让元素水平垂直居中

2019/07/11 HTML / CSS

HTML5 Web Workers之网站也能多线程的实现

2013/04/24 HTML / CSS

html5使用canvas画三角形

2014/12/15 HTML / CSS

中国综合网上购物商城：苏宁易购

2016/08/09 全球购物

PHP如何对用户密码进行加密

2014/07/31 面试题

车辆维修工自我评价怎么写

2013/09/20 职场文书

高校教师思想汇报

2014/01/11 职场文书

领导干部考察材料

2014/02/08 职场文书

艺校音乐专业自我鉴定范文

2014/03/01 职场文书

《回乡偶书》教学反思

2014/04/12 职场文书

计生工作先进事迹

2014/08/15 职场文书

就业指导讲座心得体会

2016/01/15 职场文书

如何用python清洗文件中的数据

2021/06/18 Python

linux下安装redis图文详细步骤

2021/12/04 Redis

Python+Tkinter制作专属图形化界面

2022/04/01 Python

Go gorilla/sessions库安装使用

2022/08/14 Golang