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版 )
  • #0 危汤讽 1427939825896

    firefox浏览器支持不好,貌似是浏览器bug

  • #1 林甩土 1428023217101

    恩,-moz-appearance firefox上不好用

  • #2 己删除 1429514880690
  • #3 己删除 1443088178858
  • #4 水电费三分的 1443403644045

    看看

  • #5 卓叮池 1444446405466

    给力

  • #6 任师元 1446105375521

    IE 支持 那几个版本呢?

  • #7 孔叶门 1446453986337

    ie 10 以下都不可以,有没有解决的方法呢??

  • #8 江六讨 1448856441861

    很赞

  • #9 周叨个 1449552197866

    同上#7,IE10,9,8,7,6都不行,就没有解决方案,最少也要兼容到IE8+

  • #10 卞东寺 1449718450519

    厉害

  • #11 秦亚兆 1452737292265

    ie的不行,原来的下拉三角形也还在

  • #12 卓似同 1455762642919

    @孔叶门 #7

    同问

  • #13 邓扎汗 1457437358779

    超赞

  • #14 罗州多 1460108198711

    那你加的背景图-小箭头 如何设置大小?

  • #15 范正亦 1460429572676

    @罗州多 #14

    background-size:100px 200px;用来设置背景图大小

  • #16 己删除 1461917575937
  • #17 沈执吃 1463994614520

    safari和chrome能行,不错。

  • #18 姜全文 1464142075333

    棒棒的

  • #19 邱安充 1465202507948

    6666

  • #20 范扑五 1465992338921

    谷歌使用之后 先不上内容

  • #21 郑扑目 1467462871785

    厉害

  • #22 殷币血 1467803034032

    很有用

  • #23 甘伪尤 1468421036366

    option可以控制吗,不想要鼠标划上的颜色,增加行高怎么做呢

  • #24 张飞专 1468901122338

    ie下不可以

  • #25 黎打纪 1470807253973

    赞赞赞,好人一生平安

  • #26 常旨己 1472028797183

    我就想解决IE的 这个没啥用

  • #27 萧扬下 1473346855951

    1111111

  • #28 胡朱奴 1474043710083

    博主要是能写出IE10以下的 那就好。好多都没有IE10以下的解决方法 比如;下拉框的样式怎么清除 。 要IE7 /8/ 9/ 10都有效的。,

  • #29 我本豪迈 1474423075590

    @孔叶门 #7

    加上-ms-appearance:none;

  • #30 田丹扩 1476071250515

    然并软

  • #31 翁午冲 1478056714444

    压根没什么卵用

  • #32 唐伙们 1487166295206

    有个功夫,还不如自己写一个得了

  • #33 周又冬 1488033446701

    666

  • #34 蔡次丑 1493098727919

    喀喀喀

  • #35 蒲乙牙 1494052470790

    是 是是是

  • #36 余闭异 1494483506195
    alert(123);
  • #37 ss 1495853549039

    如果不加上这个 就是无法去除, 我要解决的是必须不加上 才有效的代码如果加上这个,原来设置好的CSS全被弄的乱七八遭了,不想再修改CSS再做变动了

  • #38 ss 1495853612329

    如果不加上这个 《!DOCTYPE html》 就是无法去除, 我要解决的是必须不能加上 《!DOCTYPE html》 才有效的代码如果加上这个,原来设置好的CSS全被弄的乱七八遭了,不想再修改CSS再做变动了

  • #39 倪半马 1499408603436

    ie的不行,原来的下拉三角形也还在

  • #40 严扣厅 1499408639989

    ie10以下怎么兼容呢

  • #41 孟竹竹 1502699881338

    99999

  • #42 吴寸北 1503916148379

    @田丹扩 #30

    dzsf

  • #43 曹百合 1505117884413

    强调文本

  • #44 凌夺汇 1505811933663

    文章不错 赞一个!

  • #45 褚七刘 1506077446208

    哥们,你那个针对旧版本的兼容,点击select,下拉部分向右突出来,国内就没人了吗

  • #46 周王纤 1506490721128

    怎么去掉按钮框架线

  • #47 范伞犯 1511944728000

    想法挺好的,但不实用啊,用overflow: hidden隐藏小箭头这一步完全多余,既然宽度已经超过了父级,那么还改变下拉框的箭头样式干嘛?直接把宽度设长一点隐藏遮盖掉不就好了

  • #48 毕防朴 1512635092090

    mac上的select>options的样式怎么处理? 是的自己写一个吧?

  • #49 强左页 1513065638729

    IE9以下怎么隐藏啊,各位 , 求研究求解决啊 , 搞不定了

  • #50 吕本匹 1513670759416

    @强左页 #49 老哥搞定了吗 我也遇到这个问题了

  • #51 齐四巴 1518168466971

    㚢设计稿更何况滑过该吃饭极客小的双方各色泽大厦更好分钢结构吃饭就采访稿就是暗示日发帖好打飞机检测费经济分析的附近的经济法规及就发热交付给的人额特行间距交互的的人热看体育土匪头公共附近发广告和姐夫姐夫他解放广场就吃饭饭国家国际就赶紧分及应用人一月 有

  • #52 连收方 1521193064034

    我改好了哈哈 ie下可以了

  • #53 连收方 1521193241162

    把select外面加一个层,设置overflow: hidden;, select的宽度要比这个层的宽度还要宽,超出的部分就隐藏啦!!至于三角小图标 直接设置select的背景就好了!

  • #54 sucaihuo 1521556137922

    大家评评我这个美化效果怎么样 http://www.sucaihuo.com/js/2193.html

  • #55 潘奶分 1521615417109

    @沈执吃 #17

    @sucaihuo #54

    @连收方 #52

    222

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. 15个最好的HTML5前端响应式框架(2014)
  2. 5个经典的前端面试问题
  3. 用css禁用input、checkbox、select等html控件,实现disable效果
  4. 用纯css改变下拉列表select框的默认样式
  5. 我们抛弃了AngularJS:单页面应用的5大缺陷
  6. 超简易——Bootstrap可关闭tab标签页
  7. Animate.css让添加CSS动画像喝水一样容易
  8. 用纯CSS停止冒泡和阻止浏览器默认行为及事件响应,达到禁用(disable)的目的
  9. 我为什么选择 D3.js
  10. CSS3实现的响应式字体:自适应视图窗口大小的新单位

 欢迎订阅 - 技术周刊

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


 关注我们

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

ourjs官方微信号