zoukankan      html  css  js  c++  java
  • [转载]用纯css改变下拉列表select框的默认样式

    在这篇文章里,我将介绍如何不依赖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;
        100px;
        height: 30px;
        overflow: hidden;
    }

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


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


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

    转自http://ourjs.com/detail/551b9b0529c8d81960000007

  • 相关阅读:
    UVa 1451 Average (斜率优化)
    POJ 1160 Post Office (四边形不等式优化DP)
    HDU 3507 Print Article (斜率DP)
    LightOJ 1427 Substring Frequency (II) (AC自动机)
    UVa 10245 The Closest Pair Problem (分治)
    POJ 1741 Tree (树分治)
    HDU 3487 Play with Chain (Splay)
    POJ 2828 Buy Tickets (线段树)
    HDU 3723 Delta Wave (高精度+calelan数)
    UVa 1625 Color Length (DP)
  • 原文地址:https://www.cnblogs.com/AaronBear/p/5685679.html
Copyright © 2011-2022 走看看