纯css改变下拉列表select框的默认样式
下列CSS就可以解决,原理是将浏览器默认的下拉框样式清除,然后应用上自己的,再附一张向右对齐小箭头的图片即可。
- select {
- /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/
- border: solid 1px #;
- /*很关键:将默认的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
美中不足的是这种方案下拉选项的宽度会比他的父容器宽一点。
本文转载自:http://ourjs.com/detail/551b9b0529c8d81960000007
纯css改变下拉列表select框的默认样式的更多相关文章
- 用纯css改变下拉列表select框的默认样式(转)
用纯css改变下拉列表select框的默认样式 分享到 分类 JS学习 关键字 前端 发布 kris 2015-04-01 注意 转载须保留原文链接,译文链接,作者译者等信息. 在这 ...
- 用纯css改变下拉列表select框的默认样式(不兼容IE10以下)
在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计 ...
- 用纯css改变下拉列表select框的默认样式
http://ourjs.com/detail/551b9b0529c8d81960000007 在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 问题的提出 事 ...
- [转载]用纯css改变下拉列表select框的默认样式
在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 问题的提出 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终 ...
- CSS效果:CSS改变下拉列表select框的默认样式
原理 原理是将浏览器默认的下拉框样式清除,然后应用上自己的,再附一张向右对齐小箭头的图片即可.当然右侧的小箭头可以用伪元素before或者after来实现. select { /*Chrome和Fir ...
- 纯CSS实现tooltip提示框,CSS箭头及形状之续篇--给整个tooltip提示框加个边框
在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...
- HTML复选框checkbox默认样式修改
此方法可以将复选框的默认样式替换成任意样式.如图: 未选择: 选择时: 思路:将复选框隐藏,利用lebal元素的焦点传递特性,用lebal的样式替代复选框. 代码如下: <!DOCTYPE ht ...
- 用纯css改变默认的radio和checkbox的样式
利用css的label的伪类(::before)代替checkbox和radio效果: 优点:需要图片来调整选中前和选中后的样式,纯css搞定 缺点:兼容性,IE8以下不支持 在线例子: css改变默 ...
- 利用CSS3 filter:drop-shadow实现纯CSS改变图片颜色
体验更优排版请移步原文:http://blog.kwin.wang/programming/css3-filter-drop-shadow-change-color.html 之前做项目过程中有时候遇 ...
随机推荐
- (转)Source vs Binary Disadvantages & Advantages of each!
原链接:http://www.linuxforums.org/forum/newbie/26472-source-vs-binary-disadvantages-advantages-each.htm ...
- 创建ListView的基本步骤
参考<疯狂android讲义>第2.5节P94 1.创建一个或者多个ListView <LinearLayout xmlns:android="http://schemas ...
- SQL基础-->层次化查询(START BY ... CONNECT BY PRIOR)[转]
--====================================================== --SQL基础-->层次化查询(START BY ... CONNECT BY ...
- FastJSON 简单使用
FastJSON是一个Java语言编写的高性能,功能完善,完全支持http://json.org的标准的JSON库.多了不说了,百度一下一大把. 在此,简单的总结一下自己用过,测试过的方法. 如果使用 ...
- sqlserver 2000新建sysadmin角色
新建登录:sp_addlogin 'netcafe','pubwin' netcafe是用户名,pubwin是密码,下面是msdn官方格式: sp_addlogin [ @loginame = ] ...
- Ucenter注册后,需要二次登录才能同步登录的解决方案
1. 打开配置文件config.inc.php 在根目录data目录下最下方定义 define('DZ_DBTABLEPRE', '你的表前缀'); 2.打开uc_server/model/user. ...
- asp.net mvc4 signalR后台自推送
1.在引用中添加signalr后首选要引入Startup.cs类,在VS2012中添加Signalr后没有Startup.cs类然后就会报错 代码如下 using System; using Syst ...
- socket基础(二)
Microsoft.Net Framework为应用程序访问Internet提供了分层的.可扩展的以及受管辖的网络服务,其名字空间System.Net和System.Net.Sockets包含丰富的类 ...
- 软件测试-nextDate问题
NextDate 函数包含三个变量:month . day 和 year ,函数的输出为输入日期后一天的日期. 例如,输入为 2006年3月 7日,则函数的输出为 2006年3月8日 .要求输入变量 ...
- 【转】android电池(四):电池 电量计(MAX17040)驱动分析篇
关键词:android 电池 电量计 MAX17040 任务初始化宏 power_supply 平台信息:内核:linux2.6/linux3.0系统:android/android4.0 平台: ...