原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示
实例代码
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery自定义下拉框插件 | 演示 1</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/cs-select.css" />
<link rel="stylesheet" type="text/css" href="css/cs-skin-border.css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body class="demo-1">
<div class="container">
<header class="codrops-header">
<h1> 自定义选择元素</h1>
<nav class="codrops-demos">
<a class="current-demo" href="index.html">边框</a>
<a href="index2.html">下划线</a>
<a href="index3.html">伸缩</a>
<a href="index4.html">滑动</a>
<a href="index5.html">覆盖</a>
<a href="index6.html">旋转</a>
<a href="index7.html">弹出层选择</a>
<a href="index8.html">环形效果</a>
</nav>
</header>
<section>
<select class="cs-select cs-skin-border">
<option value="" disabled selected> 联系人方式</option>
<option value="email">E-Mail</option>
<option value="twitter">Twitter</option>
<option value="linkedin">LinkedIn</option>
</select>
</section>
</div><!-- /container -->
<script src="js/classie.js"></script>
<script src="js/selectFx.js"></script>
<script>
(function() {
[].slice.call(document.querySelectorAll('select.cs-select')).forEach(function(el) {
new SelectFx(el);
});
})();
</script>
</body>
</html>
相关推荐
UI JQuery自定义滚动条插件是 jquery自定义滚动条的UI JQuery插件。 UI JQuery自定义滚动条插件演示图： 点击查看演示：
本示例中，我们关注的是一个使用jQuery实现的多选下拉框插件，这个插件能够帮助开发者轻松地在项目中创建具有美观样式和易用功能的多选下拉框。 首先，jQuery是一个强大的JavaScript库，它简化了JavaScript的DOM...
**jQuery多选下拉框插件详解** 在Web开发中，多选下拉框是一种常见的交互元素，它允许用户在一组选项中选择多个值。jQuery作为最流行的JavaScript库之一，提供了许多插件来增强这种用户体验。`jquery.multi-select....
jQuery自定义数字滚动插件是一种基于JavaScript库jQuery的特效实现，用于展示动态的数字滚动效果。这个插件通常被用于统计数字、计数器或实时更新的数据展示，比如页面访问量、股票价格、销售数量等。它能为网站增添...
"cool的JQuery自定义select"就是为了解决这个问题而出现的一个插件，它通过jQuery库对select元素进行了美化，提供了简洁且易于使用的界面，增强了用户体验。 jQuery是一款强大的JavaScript库，它简化了JavaScript的...
在本文中，我们将深入...综上所述，jQuery下拉框美化插件FancySpinBox通过其独特的动画效果和键盘导航功能，极大地提升了下拉框组件的用户体验。无论是在设计感还是在功能性上，它都是现代网页开发中的一个有力工具。
总结来说，Spin.js是一款强大的jQuery自定义加载动画插件，它提供了丰富的定制选项和简洁的API，使得在网页中添加个性化加载动画变得轻松简单。无论是在响应式布局中，还是在复杂的Web应用中，Spin.js都能为用户提供...
开发者可以通过查看这些文件来学习如何配置和自定义插件，以满足项目需求。此外，还可能包含插件的文档，帮助开发者理解各个选项和方法的具体作用。 总的来说，jQuery Multiselect插件是提升网页多选功能用户体验的...
这是一款很实用的jQuery下拉框美化插件，它的外观并不是很炫酷，但是跟浏览器自带的下拉选择框相比却要精美不少，而且自定义的下拉框可以做到不同浏览器中的同一外观。同时，和之前介绍的简单实用的CSS3自定义下拉...
这个“jQuery自定义添加标签相关插件”很可能是为了帮助开发者实现用户友好的标签输入功能，常见于博客系统、社交媒体或任何需要用户输入关键词的地方。 在网页设计中，标签（Tags）是一种组织和分类内容的有效方式...
**jQuery自定义拉下拉菜单插件dropkick.js** 在网页设计中，下拉菜单是一种常见的交互元素，用于提供多级导航或展示大量选项。传统的HTML `<select>` 元素虽然功能完备，但在样式定制和用户体验上往往受限。为了...
**jQuery分页插件**是Web开发中常用的一种工具，用于在大量数据中实现高效的页面导航，提升用户体验。本资源包含一个演示说明，使得理解和应用变得更加直观和简单。以下将详细解析jQuery分页插件的核心知识点及其...
总的来说，"自定义select下拉框美化插件"结合了JavaScript和jQuery的强大力量，提供了丰富的定制选项，使原本单调的select元素变得生动活泼，提高了网页的视觉吸引力和用户体验。无论是个人项目还是商业应用，都是一...
"jQuery批量上传图片插件"是基于jQuery实现的一种功能，旨在为网页应用提供便捷的图片批量上传功能。这个插件通常利用Ajax技术实现异步上传，即在不刷新页面的情况下，用户可以选择多张图片并将其上传到服务器，大大...
**jQuery仿百度搜索下拉框自动补全代码插件** 在网页开发中，为了提供用户友好的搜索体验，经常会使用到自动补全功能，就像百度搜索引擎那样。这种功能可以极大地提高用户输入效率，减少用户的输入错误，提升用户...
综上所述，jQuery Zoho Viewer插件为开发者提供了一种简单、高效的文档预览解决方案。通过理解其基本原理和使用方法，我们可以轻松地在自己的项目中集成这一功能，提升用户对网页的满意度。实践是最好的老师，建议...
JavaScript 自定义滚动条插件是一种用于美化网页默认滚动条，增强用户体验的技术。通过编写或使用已有的JS库，我们可以根据设计需求定制滚动条的颜色、形状、大小以及交互效果。这样的插件通常支持自定义滚动按钮的...
通过深入学习和实践，开发者可以利用jQuery组织结构图表插件OrgChart创建出直观、互动性强的组织架构图，满足各种业务需求，无论是展示公司架构、项目团队，还是用于教学演示，都能发挥其强大的作用。
这款jQuery插件设计用于快速、便捷地实现页面或指定元素的屏蔽，为用户提供一种等待或者禁止操作的视觉提示。它支持屏蔽整个页面，也可以对选定的HTML元素进行屏蔽，提供了基本的页面屏蔽功能。开发者可以在现有项目...
**jQuery淡出效果插件jQFader详解** 在网页设计和开发中，动态效果的运用可以提升用户体验，其中淡入淡出效果是最常见的动画之一。`jQuery`库以其丰富的功能和简洁的API，使得实现这类效果变得轻而易举。`jQFader`...