火狐浏览器的select下拉框样式兼容问题

简介: 火狐浏览器的select下拉框样式兼容问题

在火狐和谷歌浏览器里面,会出现有些样式不兼容的情况,所以为了界面美观,或多或少都要写一些兼容的代码,今天写一个在火狐浏览器里面,select下拉框样式兼容。

在谷歌浏览器,样式是这样的:

当时在火狐浏览器,右侧会有比较难看的小箭头:

这个时候,需要对火狐浏览器里面的select进行一些兼容的操作,需要在全局的css里面添加这一段代码。

/* 火狐浏览器 */
 select {
                -moz-appearance: none;
                appearance: none;
                background-image: url("http://221.228.109.114:8083/manage/more/firefox_select_icon.png");
                background-repeat: no-repeat;
                background-position: calc(100% - 7px) 50%;
                background-size: 2% auto;
                border-radius:3px;
                padding:0;
}

添加完成之后就ok了。

相关文章
|
5月前
|
Web App开发
喂~讲真~我很讨厌chrome谷歌浏览器的默认填充输入框input样式咧,敲击讨厌滴啦,怎么去掉介个样式尼
喂~讲真~我很讨厌chrome谷歌浏览器的默认填充输入框input样式咧,敲击讨厌滴啦,怎么去掉介个样式尼
|
2月前
|
前端开发
浏览器——如何定制console的输出样式
浏览器——如何定制console的输出样式
55 0
|
3月前
|
前端开发 JavaScript
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
52 0
|
3月前
|
Web App开发 编解码
软件开发常见流程之兼容性和手机屏页面设计,PC端和移动端常见浏览器,国内的UC都是根据Webkit修改过来的内核,开发重点关注尺寸,常见移动端尺寸汇总,移动端,理想视口根据你设别的样式进行修改
软件开发常见流程之兼容性和手机屏页面设计,PC端和移动端常见浏览器,国内的UC都是根据Webkit修改过来的内核,开发重点关注尺寸,常见移动端尺寸汇总,移动端,理想视口根据你设别的样式进行修改
|
3月前
|
前端开发 JavaScript
js 进入浏览器全屏(F11效果)、退出全屏、指定元素全屏、判断当前是否全屏、监听浏览器全屏事件、定义全屏时的css样式(全屏伪类)
js 进入浏览器全屏(F11效果)、退出全屏、指定元素全屏、判断当前是否全屏、监听浏览器全屏事件、定义全屏时的css样式(全屏伪类)
260 0
|
5月前
|
JavaScript
vue自定义浏览器滚动条样式
vue自定义浏览器滚动条样式
40 0
|
12月前
|
Web App开发 移动开发 前端开发
如何解决不同浏览器的样式兼容性问题?
如何解决不同浏览器的样式兼容性问题?
307 0
|
5月前
|
前端开发
(最简单)使用 reset-css 初始化浏览器css样式
(最简单)使用 reset-css 初始化浏览器css样式
219 1
|
前端开发 UED
【网页前端】CSS进阶之元素的背景以及清除浏览器默认样式
【网页前端】CSS进阶之元素的背景以及清除浏览器默认样式
266 0
【网页前端】CSS进阶之元素的背景以及清除浏览器默认样式
|
前端开发
现代浏览器样式重置CSS Reset 方案汇总整理
现代浏览器样式重置CSS Reset 方案汇总整理
111 0
现代浏览器样式重置CSS Reset 方案汇总整理
下一篇
无影云桌面