美化select下拉菜单

默认的select下拉菜单不容易美化，很多UI是无法通过css更改的，所以要美化先更改结构，下面介绍的美化插件尽管代码各异，但大部分都将默认的下拉菜单转化成样式可控的元素，例如div、ul、span等，这样就可以用CSS尽情定制了。

Chosen

Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly. WooCommerce中的国家选择器很美观，这个脚本实现的效果与之完全相同。

Select Multiple Form Fields

用ctrl+鼠标点选方式在长长的多选下拉菜单中选择几项绝不是什么愉快的事，这个插件省去了按键盘的麻烦。

jQuery .customSelect()

轻量级的select美化插件，与其它不同的是，它的原理是在原始select box上加一个可以用css控制样式的span标签，所以它仍然使用了select的默认功能，兼容IE6浏览器。

时间： 2024-08-27 16:13:26

美化select下拉菜单的相关文章

自带的select下拉菜单美观度实在不怎么样,并且不容易美化,当然我们可以模拟实现select下拉菜单,但是代码稍显复杂,不过也可以通过简单的CSS实现此效果,下面通过实例简单作一下介绍. 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.

javascript模拟select下拉菜单

javascript模拟select下拉菜单: 由于自带的select下拉菜单确实是不够美观,并且美化的潜力也不够大,所以对外观要求比较高的网站,基本都要使用自定义的select下拉菜单,下面就提供了一个简单的例子供大家参考,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="

火狐浏览器下连接a下无法使用select下拉菜单

火狐浏览器下连接a下无法使用select下拉菜单:如果select下拉菜单包裹在链接a中,则无法实现选中效果,当然如此使用在实际应用中也是很少见的,不过下面还是做一下简单介绍,如何避免此种问题的出现,寄希望能够给需要者带来一定的帮助.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content=&

使用select下拉菜单筛选table表格内容

使用select下拉菜单筛选table表格内容:本章节介绍一下如何利用select下拉菜单对表单的内容进行筛选,如果数据量庞大,便于搜索使用的话,筛选效果还是非常有必要的,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/&qu

如何设置select下拉菜单option项显示的数目

如何设置select下拉菜单option项显示的数目: 本章节介绍一下如何设置select下拉菜单的可见的option项的数目,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂蚁

jquery如何删除select下拉菜单中所有的option项

jquery如何删除select下拉菜单中所有的option项:在实际应用中,有可能要求一次性删除所有的select下拉菜单的option选项,方法非常的简单.select下拉菜单: <select id="mayi"> <option value="1">蚂蚁部落一</option> <option value="2">蚂蚁部落二</option> </select> 删除

div模拟select下拉菜单效果

有些时候select下拉菜单直接用css调整样式,可能会有兼容性的问题,尤其是右侧的下拉三角,很难用css控制,那怎么办呢?可以采用div模拟select下拉菜单的效果.先直接上代码了: HTML的结构如下: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>div模拟下拉菜单特效</title> <style type="t

select下拉菜单反显不可修改，且submit可以提交数据

首先通过后台funcA()将下拉菜单反显不可修改的数据response到disable.jsp页面,disable.jsp: <script> var data1=${result.object.data1}; var data2=${result.object.data2}; var data3=${result.object.data3}; ......条件 function setDisable(){ show(data1,data2,data3); $("#.disable_

select 下拉菜单Option对象使用add(elements,index)方法动态添加

原生js 的add函数为下拉菜单增加选项 1.object.add(oElement [, iIndex]) index 可选参数:指定元素放置所在的索引号,整形值.如果没有指定值,将添加到集合的最后. 想加到最前面,指定索引值0就可以了. @@注意: add方法为js原生方法,属于element元素对象,在使用jquery对象获取元素时是不可用的 var select = $('#select'); select.add(new Option(txt,val)) 提示:undefined ad