BootStrap下拉框在firefox浏览器界面不友好的解决方案


Posted in Javascript onAugust 18, 2016

http://output.jsbin.com/titaki

以上这个链接在firefix浏览器打开就会发现里面有个小容器,而且下拉按钮样式很不友好

上谷歌查了一下

1.小容器可以利用select:padding:0

2.下拉图标可以利用background-image;-moz-appearance:none把下拉框的样式去掉,然后

@-moz-document url-prefix() {
select.form-control {
-moz-appearance: none;
appearance: none;
background-image: url("../image/buy-other-down.png");
background-repeat: no-repeat;
background-position: calc(100% - 7px) 50%;
background-size: 15% auto;
border-radius:3px;
padding:0;
}
}

ps:那个小容器是可以用padding:0去掉 但是这样的话select就没有padding-left,界面也不友好;不知道怎么解决这个小容器的问题,还需要再摸索中,有好的见解欢迎提出,谢谢!

Javascript 相关文章推荐
IE与firefox下Dhtml的一些区别小结
Dec 02 Javascript
复选框全选与全不选操作实现思路
Aug 18 Javascript
jQuery获取节点和子节点文本的方法
Jul 22 Javascript
js仿黑客帝国字母掉落效果代码分享
Nov 08 Javascript
基于JS实现PHP的sprintf函数实例
Nov 14 Javascript
javascript Slip.js实现整屏滑动的手机网页
Nov 25 Javascript
JavaScript作用域示例详解
Jul 07 Javascript
BootStrap使用file-input插件上传图片的方法
Sep 05 Javascript
基于JavaScript实现前端文件的断点续传
Oct 17 Javascript
JS验证input输入框(字母,数字,符号,中文)
Mar 23 Javascript
小试SVG之新手小白入门教程
Jan 08 Javascript
vue router 动态路由清除方式
May 25 Vue.js
js获取form表单所有数据的简单方法
Aug 18 #Javascript
Javascript中浏览器窗口的基本操作总结
Aug 18 #Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
Aug 18 #Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
Aug 18 #Javascript
jQuery fadeOut 异步实例代码详解
Aug 18 #Javascript
AngularJS 工作原理详解
Aug 18 #Javascript
js H5 canvas投篮小游戏
Aug 18 #Javascript
You might like
文件上传程序的全部源码
2006/10/09 PHP
php的array_multisort()使用方法介绍
2012/05/16 PHP
tp5(thinkPHP5)操作mongoDB数据库的方法
2018/01/20 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
php解决crontab定时任务不能写入文件问题的方法分析
2019/09/16 PHP
Aster vs Newbee BO5 第三场2.19
2021/03/10 DOTA
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
2011/11/14 Javascript
基于JavaScript 下namespace 功能的简单分析
2013/07/05 Javascript
jquery中子元素和后代元素的区别示例介绍
2014/04/02 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
2014/05/05 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
AngularJS 遇到的小坑与技巧小结
2016/06/07 Javascript
简单的JS轮播图代码
2016/07/18 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
2017/04/01 Javascript
js使用highlight.js高亮你的代码
2017/08/18 Javascript
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
vue使用代理解决请求跨域问题详解
2019/07/24 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
JS+canvas五子棋人机对战实现步骤详解
2020/06/04 Javascript
利用React高阶组件实现一个面包屑导航的示例
2020/08/23 Javascript
使用vue编写h5公众号跳转小程序的实现代码
2020/11/27 Vue.js
用Python编写web API的教程
2015/04/30 Python
Python+OpenCV图像处理——实现直线检测
2020/10/23 Python
CSS去掉A标签(链接)虚线框的方法
2014/04/01 HTML / CSS
英国领先的珍珠首饰品牌:Orchira
2016/09/11 全球购物
Topman美国官网:英国著名的国际平价时尚男装品牌
2017/12/22 全球购物
美国在线咖啡、茶和餐厅供应商:LollicupStore
2018/05/04 全球购物
vue项目实现分页效果
2021/03/24 Vue.js
教育基金募捐倡议书
2014/05/14 职场文书
交警失职检讨书
2015/01/26 职场文书
母亲节主题班会
2015/08/14 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书
建国70周年的心得体会(2篇)
2019/09/20 职场文书
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS