ie和chrome改变select 下拉列表样式

最新推荐文章于 2021-06-11 11:32:14 发布

爱敲代码的胖纸

最新推荐文章于 2021-06-11 11:32:14 发布

阅读量991

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_41164267/article/details/88025699

html 同时被 3 个专栏收录

3 篇文章

订阅专栏

css

3 篇文章

订阅专栏

select

1 篇文章

订阅专栏

本文分享了如何使用CSS自定义下拉菜单的样式，包括隐藏默认的下拉图标，适用于IE和Chrome浏览器。通过设置边框、颜色、背景图片等属性，实现美观且统一的下拉菜单外观。

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

话不多说，直接撸代码：

#ruleType{
    border: solid 1px #0b7ff3;
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
    color:#fff;
    padding-right: 100px;
  height:30px;

    background: url("../img/arrow.png") no-repeat scroll right center transparent;
}
#ruleType::-ms-expand { display: none !important; } /*隐藏下拉图标*/

亲测在ie和chrome都有用，但是ie9下，隐藏下拉图标会有问题