用纯css改变下拉列表select框的默认样式_css下拉选择框默认样式的修改-程序员宅基地

技术标签: CSS  

html

<div>
	<select>
		<option>项目1</option>
		<option>项目2</option>
		<option>项目3</option>
	</select>
</div>

css


select {
  /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/
  border: solid 1px #000;

  /*很关键:将默认的select选择框样式清除*/
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;

  /*在选择框的最右侧中间显示小箭头图片*/
  background: url("https://raw.githubusercontent.com/ourjs/static/gh-pages/2015/arrow.png") no-repeat scroll right center transparent;
 

  /*为下拉小箭头留出一点位置,避免被文字覆盖*/
  padding-right: 14px;
}

 /*如果不用背景图片写,可以用iconfont图标*/
div{position:relative;}
div:after{font-family: "iconfont";content:"\e61a"; width: 16px; height: 16px; position: absolute; right: 5%;top: 30%;pointer-events: none; font-size:16px;color:#b3b3b3;}

/*清除ie的默认选择框样式清除,隐藏下拉箭头*/
select::-ms-expand { display: none; }

针对旧版IE的解决方案

IE8/9并不支持 appearance:none CSS属性,想要支持的话可能需要非常特殊的方法, 我们需要为其添加一个父容器,容器是用来覆盖小箭头的,然后为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%;
}
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44370537/article/details/86572470

智能推荐

MySQL的distinct:去重_mysql去重distinct-程序员宅基地

文章浏览阅读1.6w次,点赞2次,收藏3次。SELECT * FROM `name`;-- 查询出三条 去除了重复的select distinct name from name;-- 会查询出五条 其实是distinct(name,id)select distinct name,id from name;-- 报错 distinct必须放在头部select id,DISTINCT name from name;..._mysql去重distinct

Ubuntu安装jdk8_ubuntu安装openjdk-8-jdk-headless-程序员宅基地

文章浏览阅读307次。下载openjdk-8-jre-headless输入命令:sudo apt install openjdk-8-jre-headless下载openjdk-8-jdk-headless输入命令:sudo apt install openjdk-8-jdk-headless配置环境变量export JAVA_HOME=/usr/lib/jvm/java-8-openjdk-amd64ex..._ubuntu安装openjdk-8-jdk-headless

什么是信号完整性_信号完整性是什么-程序员宅基地

文章浏览阅读640次。信号完整性研究:什么是信号完整性?如果你发现,以前低速时代积累的设计经验现在似乎都不灵了,同样的设计,以前没问题,可是现在却无法工作,那么恭喜你,你碰到了硬件设计中最核心的问题:信号完整性。早一天遇到,对你来说是好事。 在过去的低速时代,电平跳变时信号上升时间较长,通常几个ns。器件间的互连线不至于影响电路的功能,没必要关心信号完整性问题。但在今天的高速时代,随着IC输出开关速度的提_信号完整性是什么

2022-01-19每日刷题打卡_输入有多组测试数据. 每组测试数据以两个非零整数 m 和 n 开始,两者均不大于 20。-程序员宅基地

文章浏览阅读810次。2022-01-19每日刷题打卡一本通1256:献给阿尔吉侬的花束【题目描述】阿尔吉侬是一只聪明又慵懒的小白鼠,它最擅长的就是走各种各样的迷宫。今天它要挑战一个非常大的迷宫,研究员们为了鼓励阿尔吉侬尽快到达终点,就在终点放了一块阿尔吉侬最喜欢的奶酪。现在研究员们想知道,如果阿尔吉侬足够聪明,它最少需要多少时间就能吃到奶酪。迷宫用一个R×C的字符矩阵来表示。字符S表示阿尔吉侬所在的位置,字符E表示奶酪所在的位置,字符#表示墙壁,字符.表示可以通行。阿尔吉侬在1个单位时间内可以从当前的位置走到它上下左_输入有多组测试数据. 每组测试数据以两个非零整数 m 和 n 开始,两者均不大于 20。

go test 使用 和 我遇到的坑_go test calc_test.go calc.go 失败-程序员宅基地

文章浏览阅读1.2k次。网上很多go test的教程,但是写得都不好,尤其对新手不友好。现在同目录下有两个文件:calc.go 和 calc_test.go,现在就来讲一讲具体操作。calc.go 内容如下package mainfunc Add(a int, b int) int { return a + b + 1}func Mul(a int, b int) int { return a * b}func GetSumOut(n int) (sum int) { for i :_go test calc_test.go calc.go 失败

【LetsEncrypt】ssl证书完全自动化续签_letsencrypt自动续签-程序员宅基地

文章浏览阅读4.1k次。ssl证书如果用到很多个,手动更新将会比较烦,并且免费的LetsEncrypt 90天就要更新一次,总不能今天更新完了,明天或下周又要更新,如果能让它自动更新岂不美哉?实践证明,这是行得通的。首先,ssl证书我目前有2个用途,一个是自己服务器的nginx需要,nginx配置文件写好证书路径即可,每次获取到新的证书,nginx 需要重新加载配置文件,nginx -s reload。另一个用途是获取到证书之后上传给阿里云CDN使用,因为CDN开了https,上传证书通过CDN SDK的接口上传而不是手动。._letsencrypt自动续签

随便推点

Github精选:本周10大热门项目_每周发布github热门项目的叫什么-程序员宅基地

文章浏览阅读3.3k次。LSGO软件技术团队 每周六,盘点本周 Github 上最热门的项目,通过这份榜单能够反映出程序员关注的热点项目。由于 Github 是全球最大的开源代码库也是开源精神的集中体现地,这里是所有人的宝藏,希望这份榜单能够让大家受益。Top01Windows Terminal网址:https://github.com/microsoft/Terminal截图:简介:Windows Te..._每周发布github热门项目的叫什么

leetcode每日一题2013. 检测正方形 哈希表的双重映射简单题 剩下的就是数学功底了~-程序员宅基地

文章浏览阅读354次。本篇内容:leetcode每日一题2013. 检测正方形 哈希表的双重映射简单题 剩下的就是数学功底了~ 文章专栏:leetcode每日一题《打卡日常》 最近更新:2022年1月25日 《剑指offer》 ——字符串的简单应用(简单)字符串拼接 与替换 的加深印象个人简介:一只二本院校在读的大三程序猿,本着注重基础,打卡算法,分享技术作为个人的经验总结性的博文博主,虽然可能有时会犯懒,但是还是会坚持下去的,如果你很喜欢博文的话,建议看下面一行~(疯狂暗示QwQ)

cmd命令快捷方式_cmd映射的快捷方式是空的-程序员宅基地

文章浏览阅读5.7k次。开始菜单中的“运行”是通向程序的快捷途径,输入特定的命令后,即可快速的打开Windows的大部分程序,熟练的运用它,将给我们的操作带来诸多便捷。 winver 检查Windows版本 wmimgmt.msc 打开Windows管理体系结构(wmi) wupdmgr Windows更新程序 wscript Windows脚本宿主设置 write 写字板 winmsd 系统信息 wiaacmgr 扫描仪和_cmd映射的快捷方式是空的

关于atcoder和cf的Rating计算_atcoder rating-程序员宅基地

文章浏览阅读1w次,点赞3次,收藏2次。现在全球最大的记Rating的以比赛为主的网站就要数codeforces和atcoder了。小编经过长期实践整理了一下这两个网站Rating的一些规律。 小编表示个人还是更喜欢在atcoder上比赛的。atcoder上如果你一次得了100名,名字颜色升绿了,第二次500名也不会掉多少Rating,甚至会升,但atcoder的Rating是从0开始的,像我这种一开始几场比赛会很困难。c..._atcoder rating

超图GIS入门iserver搭建,前端调用iserver加载三维场景demo-程序员宅基地

文章浏览阅读3.5k次,点赞7次,收藏41次。目录前言一.GIS介绍,为什么选择它?二.环境安装三.调用三维GIS场景设置地图风格添加地图iServer服务前言前段时间因为对3D制图感兴趣,学习了一下国内制作GIS的公司产品技术,并以一个demo为示例演示从制作一个三维场景地图——>安装iserver服务——>发布制作的地图——>最后通过前端加载地图显示操作等分为几个步骤来逐步讲解。GIS介绍,为什么选择它?..._超图gis入门iserver搭建,前端调用iserver加载三维场景demo

超详细的 Mybatis 插件开发指南!-程序员宅基地

文章浏览阅读3.6k次,点赞2次,收藏15次。点击上方 "程序员小乐"关注,星标或置顶一起成长每天凌晨00点00分,第一时间与你相约每日英文Strive to make every day happy and m..._mybatis插件编写