其实用下列CSS就可以解决,原理是将浏览器默认的下拉框样式清除,然后应用上自己的,再附一张向右对齐小箭头的图片即可。
select {
/*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/
border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none; /*在选择框的最右侧中间显示小箭头图片*/
background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent; /*为下拉小箭头留出一点位置,避免被文字覆盖*/
padding-right: 14px;
} /*清除ie的默认选择框样式清除,隐藏下拉箭头*/
select::-ms-expand { display: none; }

select下拉框美化的更多相关文章

  1. 基于jQuery select下拉框美化插件

    分享一款基于jQuery select下拉框美化插件.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下 ...

  2. 好看的Select下拉框是如何制造的

    现在在大多数网站中都能看到很华丽的Select下拉框,他们是如何实现的呢?使用默认select肯定是不好实现,我们可以使用div+js去模拟出来select的功能,并且又能很简单的去美化它. CSS代 ...

  3. 一款基于jQuery的联动Select下拉框

    今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...

  4. jQuery制作简洁的多级联动Select下拉框

    今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...

  5. s:select下拉框validation验证

    S:select下拉框验证: <td colspan="5"> <s:select name="vo.typeVO.corp" list=&q ...

  6. 自定义样式的select下拉框深入探索

    第一个版本: 首先实现自定义select下拉框应该具有的功能,我是选择将原来的select隐藏掉,自己在jquery代码中动态写进去<dl><dd><dt>这样的结 ...

  7. jquery取消选择select下拉框

    有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿.......... 下面是三个select: <select name=&q ...

  8. jquery选中将select下拉框中一项后赋值给text文本框

    jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...

  9. js如何获取select下拉框的value以及文本内容

    select下拉框在项目开发中是经常用到的,特别是在联级菜单方面的应用更为广泛.但是,对于一些初学者来说,如何获取下拉框子节点option的value值和文本内容,还是有一点难度的.其他的就不说了,现 ...

随机推荐

  1. Thrift入门及Java实例演示

    目录: 概述 下载配置 基本概念 数据类型 服务端编码基本步骤 客户端编码基本步骤 数据传输协议 实例演示(java) thrift生成代码 实现接口Iface TSimpleServer服务模型 T ...

  2. [转] - Linux网络编程 -- 网络知识介绍

    (一)Linux网络编程--网络知识介绍 Linux网络编程--网络知识介绍客户端和服务端         网络程序和普通的程序有一个最大的区别是网络程序是由两个部分组成的--客户端和服务器端. 客户 ...

  3. 短语密码(blowfish_secret)的设置

    简单的说,phpmyadmin就是一种mysql的管理工具,安装该工具后,即可以通过web形式直接管理mysql数据,而不需要通过执行系统命令来管理,非常适合对数据库操作命令不熟悉的数据库管理者,下面 ...

  4. 清橙 A1206 小Z的袜子(莫队算法)

    A1206. 小Z的袜子 时间限制:1.0s   内存限制:512.0MB   总提交次数:1357   AC次数:406   平均分:46.75   将本题分享到:        查看未格式化的试题 ...

  5. 管理Sass项目文件结构

    构建你的结构体系 CSS预处理器的特点之一是可以把你的代码分割成很多个文件,而且不会影响性能.这都要归功于Sass的@import命令,只要在你的开发环境下,你调用不管多少文件,最终将编译出一个CSS ...

  6. NVPerfHUD

    http://www.cnblogs.com/cproom/archive/2006/11/13/559287.html NVPerfHUD是一个很好的3D程序调试工具,它是NVPerfKit的一部分 ...

  7. PHP 设计模式 笔记与总结(2)开发 PSR-0 的基础框架

    [PSR-0 规范的三项约定]: ① 命名空间必须与绝对路径一致 ② 类名的首字母必须大写 ③ 除入口文件外,其他".php"必须只有一个类(不能有可执行的代码) [开发符合 PS ...

  8. 使用ngrok

    使用ngrok让微信公众平台通过80端口访问本机 首先声明我是用java-tomcat来研究微信公众平台的. 微信公众平台要成为开发者,需要填写接口配置信息中的“URL”和“Token”这两项(参见: ...

  9. Behavior-Based Intelligence

    Computer Science An Overview _J. Glenn Brookshear _11th Edition Early work in artificial intelligenc ...

  10. 线性表集合A=A B

    大话数据结构 void union(List *a, List Lb) { int La_len, Lb_len, i; ElemType e; La_len = ListLength(La); Lb ...