用纯css改变下拉列表select框的默认样式(转)
2023-09-14 09:07:39 时间
用纯css改变下拉列表select框的默认样式
分享到
在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式。
问题的提出
事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计。
![](http://ourjs.github.io/static/2015/select-dropdown-style.jpg)
![](http://ourjs.github.io/static/2015/select-dropdown-style.jpg)
一切看起来很好,很正常,直到你看到他/她设计的一个选择下拉框跟浏览器默认提供的样式有些不同!你说:“这没办法做!你应该不会抱怨设计师,其实更改下拉输入的默认样式并不是非常难的!
Mobile 和现代浏览器的解决方案
下面是解决方案。
我们看到默认的下载选择框在firefox和chrome中是有些不同的
Chrome 和 Firefox 中分别是这样的:
![](http://ourjs.github.io/static/2015/firefox_default.png)
![](http://ourjs.github.io/static/2015/Chrome_Default.png)
其实用下列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框的长度和高度,对此进行了修改。
注* 这篇文章参考了 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%;
}
相关文章
- css 更改所有text,CSS之cssText「建议收藏」
- 2022-10-07:给定员工的 schedule 列表,表示每个员工的工作时间。 每个员工都有一个非重叠的时间段 Intervals 列表,这些时间段已经排好
- CSS 换行_css不允许换行
- 前端必备的 CSS 库,normalize.css
- 【CSS教程】紫色渐变登陆布局html+css代码
- 【CSS教程】简约渐变色登陆布局html+css代码
- 国标GB28181协议视频平台EasyGBS如何屏蔽静态文件列表
- WordPress 主题教程 #9:Style.css 和 CSS 介绍
- dedecms讲解-arc.listview.class.php分析,列表页展示详解程序员
- Struts2_day01讲义_使用Struts2完成客户列表显示的功能详解编程语言
- HTML&CSS精选笔记_列表与超链接详解编程语言
- [教程] 绕过TPM2.0和CPU兼容列表 在物理机上安装Windows 11系统
- HTML 标签列表(功能排序)
- CSS 列表样式
- CSS连接MySQL构建可视化Web应用(css连接mysql)
- CSS操作MySQL探索无可比拟的新空间(css操作mysql)
- 通过Redis加速列表的缓存(把列表缓存到redis)
- 使用Redis存储列表信息(把list放入redis)
- 纯CSS制作的新闻网站中的文章列表
- CSS规则层叠的应用css必须要注意的几点
- CURL状态码列表(详细)
- jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
- Python列表(list)、字典(dict)、字符串(string)基本操作小结