其实用下列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. Linux下MySQL的备份与还原

    Linux下MySQL的备份与还原 1. 备份 [root@localhost ~]# cd /var/lib/mysql (进入到MySQL库目录,根据自己的MySQL的安装情况调整目录) [roo ...

  2. C#页面添加提交数据后跳出小弹窗的功能

    很简单,将小弹窗部分写进一个div,利用div的visible属性去控制是否显示,首先默认为false; 当后台程序执行到插入数据完成后,设置session状态值为‘yes’ 判断,当session状 ...

  3. fibonacci数列 java

    public class Fibonacci { public static void main(String agrs[]) { ;j<=;j++) System.out.println(fo ...

  4. 揭开UTF-8的神秘面纱

    UTF-8(8-bit Unicode Transformation Format)是一种针对Unicode的可变长度字符编码,又称万国码.由Ken Thompson于1992年创建.现在已经标准化为 ...

  5. 西川善司【神秘海域(Uncharted)】的图形分析

          本文是为传播0月8日发售的[神秘海域 合集]魅力而短篇连载的第2回,这次主要集中在神秘海域系列的图形的技术方面.原文链接在 http://weekly.ascii.jp/elem/000/ ...

  6. vbaexcel

    Sub WordTest() Dim objwordApp As Word.Application Dim objword As Word.Document Dim objSeheet As Stri ...

  7. easy ui 问题

    easyui  的样式  和Bootstrap css   有冲突,不要一起使用 日期禁止输入 editable="false" ------------------------- ...

  8. Memcache 提高缓存命中率

    最近手上某个项目跟新代码,新的代码里大量采用memcahce作为缓存.所以开始深入了解memcache的内存分配策略.以前就听说有个PHP写的memcache监控脚本,在网上搜索了一下,果断下载下来用 ...

  9. javaWeb中struts开发——Logic标签

    1.Struts标签的logic标签 Logic标签是逻辑标签,是Struts中比较重要的标签,完成各种逻辑运算操作,可以直接支持全局调转. 2.1<logic:present><l ...

  10. intervention/image intervention/imagecache

    http://image.intervention.io/ 安装两个包 composer require intervention/image composer require interventio ...