如何去除ie的select下拉框箭头图标

最新推荐文章于 2025-06-16 15:20:11 发布

Qiya_leo

最新推荐文章于 2025-06-16 15:20:11 发布

阅读量1.2w

点赞数 1

分类专栏： web前端技术问题文章标签： css select ie ie 10

web前端同时被 2 个专栏收录

18 篇文章

订阅专栏

技术问题

7 篇文章

订阅专栏

本文介绍了一种使用CSS清除不同浏览器默认的select样式的方法，并通过自定义背景图像实现统一风格的下拉选择框。适用于IE10及更高版本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

select {
   width: 100%;
   height: 34px;
   border: solid 1px #0086EA;
   /*为下拉小箭头留出一点位置，避免被文字覆盖*/
   padding-right:34px;
   padding-left: 10px;
   /*将默认的select选择框样式清除*/
   appearance:none;
   -moz-appearance:none;
   -webkit-appearance:none;
   background: url("/assets/img/caret.png") no-repeat scroll right center transparent;
}
/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand { display: none; }

适用与项目中使用，用图片做select背景。清除各个浏览器select的默认样式。

目前适用于ie10及以上

太感谢http://www.bloggeng.com/archives/225