修改select下拉框样式兼容IE和Chrome浏览器
文章目录
- 问题
- 解决办法
问题
在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浏览器下,如图所示:
我是csharp大王: 不是哥们儿 笑死我了
qyescer: 。。。。。跟着做了才看到是假的
CSDN-Ada助手: MySQL入门 技能树或许可以帮到你:https://edu.csdn.net/skill/mysql?utm_source=AI_act_mysql
aixr1986: 请教下,我sio_read出来的数据有时候会被截断,分几次发送,使用sio_SetReadTimeouts ()设置延时20毫秒没成功,可能是我写法不对,这个需要怎么写呢,谢谢。
QX大黄蜂: 流程很详细,给博主点赞