下列CSS就可以解决,原理是将浏览器默认的下拉框样式清除,然后应用上自己的,再附一张向右对齐小箭头的图片即可。

  1. select {
  2. /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/
  3. border: solid 1px #;
  4.  
  5. /*很关键:将默认的select选择框样式清除*/
  6. appearance:none;
  7. -moz-appearance:none;
  8. -webkit-appearance:none;
  9.  
  10. /*在选择框的最右侧中间显示小箭头图片*/
  11. background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;
  12.  
  13. /*为下拉小箭头留出一点位置,避免被文字覆盖*/
  14. padding-right: 14px;
  15. }
  16.  
  17. /*清除ie的默认选择框样式清除,隐藏下拉箭头*/
  18. select::-ms-expand { display: none; }

在线示例  http://jsbin.com/yuxame/4/edit

注* 这篇文章参考了 change-default-select-dropdown-style-just-css,但文中所述固定了select框的长度和高度,对此进行了修改。

更新: 针对旧版IE的解决方案

评论中提到 IE8/9并不支持  appearance:none  CSS属性,想要支持的话可能需要非常特殊的方法,参考SF: 我们需要为其添加一个父容器,容器是用来覆盖小箭头的,然后为select添加一个向右的小偏移或者宽度大于父级元素。设置父级的CSS属性为超出部分不可见,即可覆盖即小箭头。然后再为父级容器添加背景图片即可。overflow: hidden并不能隐藏下拉框的显示。

HTML

  1. <div id="parent">
  2. <select>
  3. <option>what</option>
  4. <option>the</option>
  5. <option>hell</option>
  6. </select>
  7. </div>

CSS

  1. #parent {
  2. background: url('yourimage') no-repeat;
  3. width: 100px;
  4. height: 30px;
  5. overflow: hidden;
  6. }
  7.  
  8. #parent select {
  9. background: transparent;
  10. border: none;
  11. padding-left: 10px;
  12. width: 120px;
  13. height: 100%;
  14. }

演示地址:  http://jsbin.com/yuxame/edit?html,css,output

美中不足的是这种方案下拉选项的宽度会比他的父容器宽一点。

本文转载自:http://ourjs.com/detail/551b9b0529c8d81960000007

纯css改变下拉列表select框的默认样式的更多相关文章

  1. 用纯css改变下拉列表select框的默认样式(转)

    用纯css改变下拉列表select框的默认样式 分享到 分类 JS学习   关键字 前端   发布 kris  2015-04-01 注意 转载须保留原文链接,译文链接,作者译者等信息.     在这 ...

  2. 用纯css改变下拉列表select框的默认样式(不兼容IE10以下)

    在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式.     事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计 ...

  3. 用纯css改变下拉列表select框的默认样式

    http://ourjs.com/detail/551b9b0529c8d81960000007 在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 问题的提出 事 ...

  4. [转载]用纯css改变下拉列表select框的默认样式

    在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 问题的提出 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终 ...

  5. CSS效果:CSS改变下拉列表select框的默认样式

    原理 原理是将浏览器默认的下拉框样式清除,然后应用上自己的,再附一张向右对齐小箭头的图片即可.当然右侧的小箭头可以用伪元素before或者after来实现. select { /*Chrome和Fir ...

  6. 纯CSS实现tooltip提示框,CSS箭头及形状之续篇--给整个tooltip提示框加个边框

    在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...

  7. HTML复选框checkbox默认样式修改

    此方法可以将复选框的默认样式替换成任意样式.如图: 未选择: 选择时: 思路:将复选框隐藏,利用lebal元素的焦点传递特性,用lebal的样式替代复选框. 代码如下: <!DOCTYPE ht ...

  8. 用纯css改变默认的radio和checkbox的样式

    利用css的label的伪类(::before)代替checkbox和radio效果: 优点:需要图片来调整选中前和选中后的样式,纯css搞定 缺点:兼容性,IE8以下不支持 在线例子: css改变默 ...

  9. 利用CSS3 filter:drop-shadow实现纯CSS改变图片颜色

    体验更优排版请移步原文:http://blog.kwin.wang/programming/css3-filter-drop-shadow-change-color.html 之前做项目过程中有时候遇 ...

随机推荐

  1. (转)Source vs Binary Disadvantages & Advantages of each!

    原链接:http://www.linuxforums.org/forum/newbie/26472-source-vs-binary-disadvantages-advantages-each.htm ...

  2. 创建ListView的基本步骤

    参考<疯狂android讲义>第2.5节P94 1.创建一个或者多个ListView <LinearLayout xmlns:android="http://schemas ...

  3. SQL基础-->层次化查询(START BY ... CONNECT BY PRIOR)[转]

    --====================================================== --SQL基础-->层次化查询(START BY ... CONNECT BY ...

  4. FastJSON 简单使用

    FastJSON是一个Java语言编写的高性能,功能完善,完全支持http://json.org的标准的JSON库.多了不说了,百度一下一大把. 在此,简单的总结一下自己用过,测试过的方法. 如果使用 ...

  5. sqlserver 2000新建sysadmin角色

    新建登录:sp_addlogin 'netcafe','pubwin'  netcafe是用户名,pubwin是密码,下面是msdn官方格式: sp_addlogin [ @loginame = ] ...

  6. Ucenter注册后,需要二次登录才能同步登录的解决方案

    1. 打开配置文件config.inc.php 在根目录data目录下最下方定义 define('DZ_DBTABLEPRE', '你的表前缀'); 2.打开uc_server/model/user. ...

  7. asp.net mvc4 signalR后台自推送

    1.在引用中添加signalr后首选要引入Startup.cs类,在VS2012中添加Signalr后没有Startup.cs类然后就会报错 代码如下 using System; using Syst ...

  8. socket基础(二)

    Microsoft.Net Framework为应用程序访问Internet提供了分层的.可扩展的以及受管辖的网络服务,其名字空间System.Net和System.Net.Sockets包含丰富的类 ...

  9. 软件测试-nextDate问题

    NextDate 函数包含三个变量:month . day 和 year ,函数的输出为输入日期后一天的日期. 例如,输入为 2006年3月 7日,则函数的输出为 2006年3月8日 .要求输入变量  ...

  10. 【转】android电池(四):电池 电量计(MAX17040)驱动分析篇

    关键词:android 电池  电量计  MAX17040 任务初始化宏 power_supply 平台信息:内核:linux2.6/linux3.0系统:android/android4.0 平台: ...