在这篇文章里,我将介绍如何不依赖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

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

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

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

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

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

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

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

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

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

    下列CSS就可以解决,原理是将浏览器默认的下拉框样式清除,然后应用上自己的,再附一张向右对齐小箭头的图片即可. select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下* ...

  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. oracle计算两行差值

    Lag和Lead分析函数可以在同一次查询中取出同一字段的前N行的数据(Lag)和后N行的数据(Lead)作为独立的列. 这种操作可以代替表的自联接,并且LAG和LEAD有更高的效率. SELECT c ...

  2. Commons-Collections 集合工具类的使用

    package com.bjsxt.others.commons; import java.util.ArrayList; import java.util.List; import org.apac ...

  3. (转载)afxres找不到问题

    在试用VS2010时一个问题困扰了我,就是打开c++项目后,rc的dialog进不去,没法拖控件,把我给抓狂的...而且网上大部分说的都是Directions的问题..我的问题明显不是这个问题. 于是 ...

  4. 深入探索c++对象模型

    第一章关于对象 c++在布局和存取时间的额外负担主要有virtual引起 virtual function:运行期动态绑定 virtual base class :base class多次出现在派生类 ...

  5. C语言Notebook

    int *pointer=NULL    /*指针变量一定要赋初值*/pritnf("Pointer' address is:%p",&pointer);  /*打印指针变 ...

  6. 转 LoadRunner 技巧之 IP欺骗 (推荐)

    IP欺骗也是也loadrunner自带的一个非常有用的功能. 需要使用ip欺骗的原因: 1.当某个IP的访问过于频繁,或者访问量过大是,服务器会拒绝访问请求,这时候通过IP欺骗可以增加访问频率和访问量 ...

  7. mongodb 分组查询

    数据的保存 include_once 'mDB.class.php'; $m=new mDB(); $m->setDB('mydb'); // $m->save('stu',['dept' ...

  8. Kolmogorov 的数学观与业绩

    https://www.douban.com/group/topic/11395706/ 作者:伊藤清 当我得知苏联伟大的数学家,84岁的 Andreyii Nikolaevich Kolmogoro ...

  9. DHCP snooping

    DHCP snooping 技术介绍   DHCP监听(DHCP Snooping)是一种DHCP安全特性.Cisco交换机支持在每个VLAN基础上启用DHCP监听特性.通过这种特性,交换机能够拦截第 ...

  10. MySQL_采购入库价格与在线售价监控_20161213

    c037采购入库价格与在线售价监控 ##c037采购入库价格与在线售价监控 SELECT a.城市,a.产品ID,a.商品名称,a.入库日期,a.入库仓库,a.单价,a.总金额,a.采购人,b.单价 ...