用纯css改变下拉列表select框的默认样式(转)
用纯css改变下拉列表select框的默认样式
问题的提出
一切看起来很好,很正常,直到你看到他/她设计的一个选择下拉框跟浏览器默认提供的样式有些不同!你说:“这没办法做!你应该不会抱怨设计师,其实更改下拉输入的默认样式并不是非常难的!
Mobile 和现代浏览器的解决方案
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; }
注* 这篇文章参考了 change-default-select-dropdown-style-just-css,但文中所述固定了select框的长度和高度,对此进行了修改。
更新: 针对旧版IE的解决方案
评论中提到 IE8/9并不支持 appearance:none CSS属性,想要支持的话可能需要非常特殊的方法,参考SF: 我们需要为其添加一个父容器,容器是用来覆盖小箭头的,然后为select添加一个向右的小偏移或者宽度大于父级元素。设置父级的CSS属性为超出部分不可见,即可覆盖即小箭头。然后再为父级容器添加背景图片即可。
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://jsfiddle.net/n5gu2mdw/3/
用纯css改变下拉列表select框的默认样式(转)的更多相关文章
- 用纯css改变下拉列表select框的默认样式(不兼容IE10以下)
在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计 ...
- 用纯css改变下拉列表select框的默认样式
http://ourjs.com/detail/551b9b0529c8d81960000007 在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 问题的提出 事 ...
- [转载]用纯css改变下拉列表select框的默认样式
在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 问题的提出 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终 ...
- 纯css改变下拉列表select框的默认样式
下列CSS就可以解决,原理是将浏览器默认的下拉框样式清除,然后应用上自己的,再附一张向右对齐小箭头的图片即可. select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下* ...
- 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 之前做项目过程中有时候遇 ...
随机推荐
- ASP.NET MVC4.0 后台获取不大前台传来的file
<td>选择图片</td> <td> <input type="file" id="uploadImg" name=& ...
- TinyMCE插件:RESPONSIVE filemanager 9 图片自动添加水印
跟踪function() 搜索(filemanager/upload.php) 在代码中发现,上传成功后,会传回JSON信息数据,于是最后找到方法是 $upload_handler = new Upl ...
- Linux上搭建svn资源库
一.安装 centos上安装 使用命令svn --version查看是否安装过svn: 如果出现 bash: svn: command not found 则显示没有安装 可以使用 yum in ...
- mvc:interceptor拦截器使用
在spring-mvc.xml里面配置标签 <mvc:interceptors> <mvc:interceptor> <mvc:mapping path="/* ...
- Div标签使用inline-block有间距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- golang使用rabbitMQ入门代码
package main import ( "github.com/streadway/amqp" "log" "time" ) func ...
- 解决应用程序无法正常启动0xc0150002等问题
1.在程序运行出错的时候,右键“我的电脑”,然后点击“管理”→“事件查看器”→“Windows 日志”→“应用程序”,查看错误信息: 1> “E:\IPCam_share\ARP\數據處理\Hg ...
- 如何写chrome扩展
转载:http://www.cnblogs.com/pingfan1990/p/4560215.html 最近看到公司同事经常写chrome扩展,来提高生成效率,回想想自己以前也写过chrome扩展, ...
- 为 ItemsControl 类型的控件提供行号,mvvm模式 绑定集合
从网络上看到的两种方式,一种是,在 codebehind 里为 控件写事件,下面是将集合绑定到 DataGrid 控件: private void DataGridSoftware_LoadingRo ...
- WPF ResourceDictionary 主题资源替换
原文:WPF ResourceDictionary 主题资源替换 当我们需要在程序中替换主题,更换另一套背景.颜色.样式时,如何在不修改资源Key值,直接替换呢? 问题&疑问 1. Key值冲 ...