`
yuanjianhang
  • 浏览: 108776 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

自定义表单select元素样式

阅读更多

做项目要用到自定义样式的select插件,自己就用jQuery写了一个。

说明如下:

1、插件的样式完全有css控制,可以自定义select插件中任何一个部分的样式。

2、完全模拟select元素的交互习惯,支持select元素的js功能,例如:change事件。如果选中一个条目,此插件就会改变原select的value值,并且自动触发change事件。

3、支持键盘的操作。完全模仿原生的select的键盘习惯,支持上下键翻动,回车键选中当前条目,包括滚动条的自动适应。

 

插件预览

 

 

插件可配置项:

1、css样式位于css中,可自行配置。

2、js配置项:

                    top: 0,
                    left: 0,
                    liActive: "active",
                    maxItems: 40

top和left是插件距离原select位置,一般不用配置。

liActive是鼠标经过条目时的样式。

maxItems是显示的最大条目,多于此条目时出现滚动条。

 

文件打包提供下载。

 

1
0
分享到:
评论
1 楼 yuanjianhang 2011-07-13  
现在还是有小的bug——在下拉条出现后的滚动条的位置定位上。
不过已经在攻克中……

相关推荐

    表单元素样式自定义

    原理:在需要自定义样式的表单元素外包装一层dom元素,然后控制dom的外观。 便捷:不需要有什么特殊的布局要求直接在您需要修改外观的表单元素上添加置顶类名即可。 兼容:自定义样式无兼容问题。 取值:使用原表单...

    jQuery实现select下拉框样式美化效果

    内容索引:脚本资源,jQuery,Select,下拉框美化 jQuery实现select下拉框样式美化效果,这是个挺实用的网页美化技巧,现在jquery很流行,用它不但可以实现交互的Ajax效果,同时也可用来美化表单元素,像下拉框,单选框...

    HTML-select-option:为 HTML 表单上的 Select 选项收集更易于样式化的替代品,因为默认的替代品真的很烦人!

    目的是让一些非常好的、响应式/跨浏览器/其他流行语准备好选择表单元素放入需要一些样式的网络表单中(因此我们不必与默认值作斗争)。 在开始设置下拉列表(或其他表单元素)样式之前,先浏览一下。 如果你可以...

    reform:HTML形成您想要它们的方式

    每当您需要自定义表单元素时,请执行以下操作: 将reform-checkbox类添加到input[type=checkbox]元素添加reform-selectbox select reform-selectbox类以select元素添加reform-multilineselectbox类以select元素将...

    form-helpers:表单助手

    花式下拉菜单自定义样式的下拉菜单配置: window.FormHelpers = {FancyDropdowns: {enabled: true,selector: '.input.input-select:not([data-fancy-dropdowns="off"]) select'}};下载依赖关系发展CD到root 安装...

    ember-select-light:最简单的Ember` `有

    对于寻求简单解决方案以在其表单和应用程序中选择元素的开发人员而言,结果是一个功能强大但可自定义的选项。 安装 ember install ember-select-light 跑步 ember serve 访问位于应用程序。 林亭 npm run lint:hbs...

    LayuiForm表单.txt

    form表单元素包括:text 文本输入框,password密码输入框,checkbox复选框,radio单选框,file 文件域,submit表单提交action指向的文件,reset表单清空,image图片提交按钮,button按钮,hidden隐藏域。 select ...

    easydropdown:一个轻量级的库,用于构建美观的样式元素

    EasyDropDown捆绑了三个,可以用作自定义样式的起点。 查看,看有什么可能。 演示的源代码可以在目录中找到。 注意:如果您正在移动设备上查看演示,则会根据看到设备的本机选择UI。特征尊重原生<select>元素...

    news-react:使用newsapi.org API的新闻搜索器React应用

    在这个项目中,我为表单的html select元素使用了自定义钩子,用户可以在其中选择所需的类别。 这使我可以区分职责,自定义钩子可以获取用户选择,并且表单仅发送到App.js,在useEffect中使用该表单来实现API咨询并...

    json-editor:一个将JSON模式转换为表单的jquery插件

    RTL支持:只需将样式(direction:rtl)添加到占位符元素。 它仅取决于jQuery。 可以在拖曳模式下使用:属性网格(当前实现)/常规形式(路线图)。 易于自定义CSS。 支持的输入:text / checkbox / textarea /...

    精通AngularJS part1

    85使用指令修改按钮样式219 编写一个按钮指令220 86理解AngularJS的组件指令222 编写一个分页指令222 为分页指令编写单元测试代码223 在指令中使用HTML模板224 从父作用域中隔离指令225 使用@插入属性226 ...

    ExtJSWeb应用程序开发指南(第2版)

    3.3.4 自定义样式的进度条样式 3.4 实现工具栏和菜单栏 3.4.1 认识Ext.toolbar.Toolbar 3.4.2 只包含按钮的简单工具栏 3.4.3 包含多种元素的复杂工具栏 3.4.4 启用和禁用工具栏 3.4.5 认识Ext.menu.Menu菜单 ...

    [JavaScript.DOM高级程序设计](加)桑贝斯.扫描版.part3.rar

     12.3.3 开始创建人造select元素   12.3.4 查找select元素   12.3.5 构建DOM元素   12.4 添加事件——为人造select赋予生命   12.5 让表单绽放光彩   12.6 行为修正   12.6.1 z-index来救急  ...

    [JavaScript.DOM高级程序设计](加)桑贝斯.扫描版.part2.rar

     12.3.3 开始创建人造select元素   12.3.4 查找select元素   12.3.5 构建DOM元素   12.4 添加事件——为人造select赋予生命   12.5 让表单绽放光彩   12.6 行为修正   12.6.1 z-index来救急  ...

    [JavaScript.DOM高级程序设计](加)桑贝斯.扫描版.part1.rar

     12.3.3 开始创建人造select元素   12.3.4 查找select元素   12.3.5 构建DOM元素   12.4 添加事件——为人造select赋予生命   12.5 让表单绽放光彩   12.6 行为修正   12.6.1 z-index来救急  ...

    H5+CSS3.zip

    表单标签:使用创建表单,文本输入框,密码输入框,数字输入框,网址输入框,邮箱输入框,创建文本域,单选框,复选框,使用select、option创建下拉菜单,提交按钮,重置按钮; CSS3部分具体内同包括: css引入方式...

    jQuery详细教程

    $("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素 三. jQuery 事件函数 jQuery 事件处理方法是 jQuery 中的核心函数。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语...

    combox 控件

    通过这种方式可以将选中项传递给hidden表单元素,用于提交表单。 特点5:自定义图标 下拉框树结构每个节点都可以自定义图标。效果如下: 特点6:宽度处理 QUI树形下拉框对于宽度的处理方式是:默认...

    精通JS脚本之ExtJS框架.part2.rar

    5.3.4 自定义样式的进度条 5.4 工具栏和菜单栏 5.4.1 Ext.Toolbar简介 5.4.2 只包含按钮的简单工具栏 5.4.3 包含多种元素的复杂工具栏 5.4.4 Ext.menu.Menu简介 5.4.5 最简单的菜单栏 5.4.6 创建三级或多级...

    精通JS脚本之ExtJS框架.part1.rar

    5.3.4 自定义样式的进度条 5.4 工具栏和菜单栏 5.4.1 Ext.Toolbar简介 5.4.2 只包含按钮的简单工具栏 5.4.3 包含多种元素的复杂工具栏 5.4.4 Ext.menu.Menu简介 5.4.5 最简单的菜单栏 5.4.6 创建三级或多级...

Global site tag (gtag.js) - Google Analytics