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

激活 ActiveX 控件

Oct 09 Javascript

Javascript学习笔记2 函数

Jan 11 Javascript

使用JSLint提高JS代码质量方法分享

Dec 16 Javascript

jQuery中:input选择器用法实例

Jan 03 Javascript

实现前后端数据交互方法汇总

Apr 07 Javascript

浅谈JS读取DOM对象(标签)的自定义属性

Nov 21 Javascript

JS操作xml对象转换为Json对象示例

Mar 25 Javascript

JavaScript全屏和退出全屏事件总结（附代码）

Aug 17 Javascript

vue和webpack项目构建过程常用的npm命令详解

Jun 15 Javascript

使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果

Aug 16 Javascript

基于vue-cli3创建libs库的实现方法

Dec 04 Javascript

Ant-design-vue Table组件customRow属性的使用说明

Oct 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

PHP模板引擎Smarty的缓存使用总结

2014/04/24 PHP

PHP实现图片旋转效果实例代码

2014/10/01 PHP

PHP中的常见魔术方法功能作用及用法实例

2015/07/01 PHP

PHP中in_array的隐式转换的解决方法

2018/03/06 PHP

PHP获取对象属性的三种方法实例分析

2019/01/03 PHP

php生成静态页面并实现预览功能

2019/06/27 PHP

在textarea文本域中显示HTML代码的方法

2007/03/06 Javascript

不用锚点也可以平滑滚动到页面的指定位置实现代码

2013/05/08 Javascript

浅谈javascript的分号的使用

2015/05/12 Javascript

为什么JavaScript没有块级作用域

2016/05/22 Javascript

浅谈js的解析顺序作用域严格模式

2017/10/23 Javascript

vue.js使用v-model指令实现的数据双向绑定功能示例

2018/05/22 Javascript

JavaScript基础教程之如何实现一个简单的promise

2018/09/11 Javascript

微信小程序页面间传值与页面取值操作实例分析

2019/04/30 Javascript

JS实现贪吃蛇游戏

2019/11/15 Javascript

基于JS+HTML实现弹窗提示是否确认提交功能

2020/06/17 Javascript

JavaScript图片旋转效果实现方法详解

2020/06/28 Javascript

Python语言技巧之三元运算符使用介绍

2013/03/04 Python

python计算方程式根的方法

2015/05/07 Python

pycharm远程调试openstack的图文教程

2017/11/21 Python

利用Python在一个文件的头部插入数据的实例

2018/05/02 Python

python format 格式化输出方法

2018/07/16 Python

Selenium鼠标与键盘事件常用操作方法示例

2018/08/13 Python

使用python代码进行身份证号校验的实现示例

2019/11/21 Python

python 连续不等式语法糖实例

2020/04/15 Python

keras 模型参数,模型保存,中间结果输出操作

2020/07/06 Python

python如何快速拼接字符串

2020/10/28 Python

python3字符串输出常见面试题总结

2020/12/01 Python

预订从美国飞往印度的机票：MyTicketsToIndia

2017/05/19 全球购物

阿玛尼美妆英国官网：Giorgio Armani Beauty英国

2019/03/28 全球购物

旅游与酒店管理的自我评价分享

2013/11/03 职场文书

大学毕业生简单自荐信

2013/11/05 职场文书

施工安全承诺书

2014/05/22 职场文书

学生病假条范文

2015/08/17 职场文书

让人感觉高大上的讲话稿怎么写？

2019/07/08 职场文书

用python修改excel表某一列内容的操作方法

2021/06/11 Python