OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

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


分享到
分类 JS学习   关键字 前端   发布 kris  1427872517367
注意 转载须保留原文链接,译文链接,作者译者等信息。  
在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式。

问题的提出


事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计。




一切看起来很好,很正常,直到你看到他/她设计的一个选择下拉框跟浏览器默认提供的样式有些不同!你说:“这没办法做!你应该不会抱怨设计师,其实更改下拉输入的默认样式并不是非常难的!

Mobile 和现代浏览器的解决方案


下面是解决方案。


我们看到默认的下载选择框在firefox和chrome中是有些不同的

Chrome 和 Firefox 中分别是这样的:






其实用下列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; }


在线示例  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

<div id="parent">
  <select>
      <option>what</option>
      <option>the</option>
      <option>hell</option>
  </select>
</div>

CSS

 #parent {
    background: url('yourimage') no-repeat;
    width: 100px;
    height: 30px;
    overflow: hidden;
}

#parent select {
    background: transparent;
    border: none;
    padding-left: 10px;
    width: 120px;
    height: 100%;
}

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


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


社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. NativeScript的工作原理:用JavaScript调用原生API实现跨平台
  2. 6款基于Node.JS的开源内容管理和静态网站生成系统
  3. Session劫持与Session-ID的安全长度
  4. 用原生HTML5控件实现输入框自动提示(下拉列表补全)功能
  5. NativeScript的竞争者React Native:又一个用JavaScript写原生iOS应用的项目
  6. 微软,IBM,ARM等大公司先后加入对Node.js/io.js的支持
  7. 微软博客:Angular 2将基于TypeScript
  8. history.js 一个无刷新就可改变浏览器栏地址的插件(不依赖jquery)
  9. 使用Google Analytics跟踪捕获JavaScript,AngularJS,jQuery的在线错误和异常
  10. AngularJS和$scope.$apply()用法的最佳实践
  11. AirJD-简单好用的免费建站工具

 相关阅读 - JS学习
  1. Atom编辑器嵌入Node.JS引擎实践
  2. AngularJS和$scope.$apply()用法的最佳实践
  3. 微软,IBM,ARM等大公司先后加入对Node.js/io.js的支持
  4. 用原生HTML5控件实现输入框自动提示(下拉列表补全)功能
  5. 让我们写快速的JavaScript,JS性能优化小窍门
  6. 通过Web Audio API可视化输出MP3音乐频率波形
  7. 用页面可见性(Page Visibility)API创建用户体验良好的网站
  8. 理解Node.js的事件循环(Event Loop)和线程池
  9. 从一行CSS调试代码中学到的JavaScript知识
  10. 在nodejs中使用Redis缓存和查询数据及Session持久化(Express)

 关键字 - 前端
  1. 用纯CSS停止冒泡和阻止浏览器默认行为及事件响应,达到禁用(disable)的目的
  2. 5个经典的前端面试问题
  3. 我为什么选择 D3.js
  4. CSS3实现的响应式字体:自适应视图窗口大小的新单位
  5. 用纯css改变下拉列表select框的默认样式
  6. AngularJS在大型单页面应用中的性能优化(一)
  7. 我们抛弃了AngularJS:单页面应用的5大缺陷
  8. 我被问得最多的十个JavaScript前端面试问题
  9. 超简易——Bootstrap可关闭tab标签页
  10. 什么是Viewport Meta(width详解)及在手机上的应用

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号