问题

在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;}

设置完select下拉框的css样式后，再来看一下效果，Chrome浏览器下，如图所示：

IE11浏览器下，如图所示：

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

html select 样式t调整_css修改html select下拉框样式(含右边箭头)
css修改html select下拉框样式(含右边箭头)2017-10-12 16:51 我们经常会看到一些页用用的select下拉框非常漂亮,其实很多是用插件实现的. 如果不使用插件,靠纯css能不 ...
Element UI select 下拉框样式覆盖
因为我需要写一个大屏页面,然后需要用到select框,我想把select下拉选项的背景颜色改成透明,然后我想覆盖掉它本身的样式.我本来想改变el-select-dropdown的样式,即使使用了 /d ...
解决IOS select下拉框样式
文章目录问题解决方法问题一般来说,在ios端,对于select下拉框会默认出现黑色背景,input输入框上面出现阴影,导致用户体验感不是很好,总体原因是ios中对透明度渲染的效果不是很好. 会 ...
如何实现自定义下拉组件，select下拉框样式自定义，带搜索的select下拉框
1.实现的效果 2.实现说明 3.完整代码一.实现的效果: 二.实现说明: 1.由于无法修改原生select中的option样式,因此自己通过ul,li实现下拉列表,用input实现回显框: inp ...
兼容火狐浏览器的select下拉框样式
经常遇到这样的问题,在使用bootstrap框架的时候select选择框的样式在火狐浏览器上继承的是浏览器本身的样式,跟谷歌等其他的浏览器样式对比很难看,并且很难调整,但是! 好东西来了,现在能调成跟 ...
vue 自定义select下拉框样式(div模拟)
<div class="divInput"><div class="input" @click="openValue"&a ...
html下拉菜单隐藏属性,css修改selec下拉菜单样式
css修改selec下拉菜单样式2018-01-19 15:00 修改select下拉菜单样式其实可以使用javascript来操作,这样更方便. 但有些人并不喜欢,想用单纯的css来控制. 以下有三 ...
select下拉框选中不显示
select下拉框选中不显示 1.浏览器缓存问题,可以尝试清楚浏览器缓存 2.代码问题,先查看代码是否正确, 3.编译问题,重新编译代码即可
select下拉框箭头样式修改
select下拉框箭头样式修改下拉框箭头是不能修改的,但我们可以吧原有的箭头去掉,再用背景写一个箭头 <style> /*下拉前箭头*/select{/*取消默认箭头开始*/appear ...
html select滚动条样式修改,如何定义Select下拉框的边框颜色和滚动条样式
如何定义Select下拉框的边框颜色和滚动条样式 (2012-11-07 15:00:25) 标签: 定义select下拉框 select定义css不显示杂谈如何定义Select下拉框的边框颜色和 ...

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

文章目录

问题

解决办法

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

最新文章

热门文章