修改select下拉框样式兼容IE和Chrome浏览器

最新推荐文章于 2024-07-29 12:13:58 发布

cgsthtm

最新推荐文章于 2024-07-29 12:13:58 发布

阅读量2.5k

点赞数

文章标签： css IE兼容 select样式下拉框箭头 css样式兼容

本文链接：https://blog.csdn.net/CGS_______/article/details/117809994

版权

文章目录

问题
解决办法

问题

在Chrome浏览器和IE11浏览器下，select下拉框表现的样式不一致。Chrome浏览器下，如图所示：
在这里插入图片描述
IE11浏览器下，如图所示：

此时select下拉框的css的代码如下：

.Data_select {
    width: 90px;
    height: 90px;
    line-height: 90px;
    margin-bottom: 20px;
    text-align: center;
    padding: 0 2%;
}

.Data_select {
    background: rgba(3,47,108,0.57);
    border: 2px solid #3853ca;
    border-radius: 8px;
    box-shadow: 5px 5px 84px rgba(10,31,75,0.75) inset;
    cursor: pointer;
}

解决办法

想要解决selelct下拉框样式兼容问题，可以将其下拉箭头样式隐藏，然后用下拉箭头图片代替，下拉箭头图片可以到阿里巴巴图标库下载，如下：
在这里插入图片描述
下载完毕后，设置select下拉框的css样式，如下：

.Data_select {
    /*设置select下拉框的背景颜色和背景图片*/
    background: rgba(3,47,108,0.57) url("images/xiala4.png") no-repeat center;
    border: 2px solid #3853ca;
    border-radius: 8px;
    box-shadow: 5px 5px 84px rgba(10,31,75,0.75) inset;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    /*设置select下拉框背景图片的大小和位置*/
    background-size: 18px 18px;
    background-position-x: 60px;
}
    /*设置select下拉框的样式，去掉下拉框箭头*/
    .Data_select::-ms-expand {
        display: none;
    }