BootStrap下拉框在firefox浏览器界面不友好的解决方案
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,界面也不友好;不知道怎么解决这个小容器的问题,还需要再摸索中,有好的见解欢迎提出,谢谢!
相关推荐
-
bootstrap IE8 兼容性处理
bootstrap IE8 兼容性处理 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content=&q
-
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
上一次写的<Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面>(点击打开链接)部分老一辈的需求可能对这种后现代的风格并不满意,没关系,我们完全可以改变布局拉成门户式的风格,他们马上就接受了: 首先,门户式的布局的大概你要清楚,这一才利于我们快速布局开头是一个较小的巨幕,后是一个导航栏,这里还是用到了按钮组接着是各个专栏,这里是关于bootstrap栅格系统与面板的运用,最后是版权信息,这里还是一个面板. 反正个人觉得这种门户式的布局风格烂大街,但不知道为何似乎很受众的样子. 我们需
-
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
虽然说IE6除了部分要求苛刻的需求以外已经被可以不考虑了,但是WIN7自带的浏览器IE8还是需要支持的. 本文这个方法主要的优点,个人觉得就是准备少,不需要上网寻找大量的图片做素材,你只要准备好一个bootstrap.jquery与photoshop就可以了,bootstrap与jquery怎么配置,可以参考<Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗>(点击打开链接) 被要求编写一个网站,常常会被如何布局困扰,其实也不难,如果能够熟练使用Bootstrap,并且有一套特定
-
Bootstrap 3浏览器兼容性问题及解决方案
Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.-- Bootstrap 官网 Bootstrap 来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JavaScript的,它简洁灵活.开发过程中,我们只需通过给DOM元素添加相应的class即可调用,使得 Web 开发更加快捷. 接下来进入主题,谈谈 Bootstrap 3 浏览器兼容性问题及其对应的解决方案: 1.移动设备支持情况
-
BootStrap下拉框在firefox浏览器界面不友好的解决方案
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; appear
-
bootstrap下拉框动态赋值方法
以前一直使用easyui,发现越来越跟不上现在前端的一些技术,所以改用bootstrap,然后发现好多包括简单的下拉赋值都不会了,这里上网找了下,然后发现下面这个不错,用上了,特此记录一下 <script type="text/javascript"> /** */ window.onload = function () { showsmsselect(); } function showsmsselect() { $.ajax({ url : "${pageCo
-
基于Bootstrap下拉框插件bootstrap-select使用方法详解
写在前面: 在这次的项目中,没有再使用liger-ui做为前端框架了,改为了Bootstrap,这次也好接触下新的技术,在学习的过程中发现,Bootstrap的一些组件基本都是采用class的形式,就是给一个它定义好的样式,就会给你展现出一个好看的组件出来,这个比liger-ui的界面做的要好,但是了解了Boostrap的基本语法后,发现在官方的文档中,并没有一些可以动态加载组件的demo,因为之前用的liger-ui,大多数组件都只需要写一行代码,就能很好的,并且很方便的直接与后台进行交互,并
-
Bootstrap模块dropdown实现下拉框响应
本文介绍了Bootstrap下拉框模块dropdown的使用方法,供大家参考,具体内容如下 一.源码分析: Dropdowns.scss:下拉框模块 Javascripts/bootstrap/dropdown.js:实现下拉框响应 二.功能及原理: 下拉选项卡,默认不能实现显示选中项的功能 原理: 1.利用dropdown类作为定位点,然后让子级的列表dropdown-menu绝对定位实现,还需要加一个单击点作为设置data-toggle="dropdown"才能做关联. 2. 需要
-
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
先说点闲话,熟悉Angular的猿们会喜欢这个插件的. 00.本末倒置 不得不承认我是一个喜欢本末倒置的人,学生时代就喜欢先把晚交的作业先做,留着马上就要交的作业不做,然后慢悠悠做完不重要的作业,卧槽,XX作业马上要交了,赶紧补补补.如今做这个项目,因为没找到合适的多选下拉Web插件,又不想用html自带的丑陋的<select multiple></select>,自己花了一整天时间做了一个.或许这样占用的主要功能开发的时间,开发起来会更有紧迫感吧.感觉自己是个抖M自虐倾向,并且伴
-
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
相关阅读:微信支付如何实现内置浏览器的H5页面支付 情景再现: 正当开心地收拾东西准备下班的时候,测试部的姑娘跑过来提了一个bug: "在iphone下,点击下拉框出现页面乱跳转现象,安卓机并没有这个问题.而跳转的页面刚好是底部菜单的几个页面."由于项目比较急,小编只能乖乖留下解决问题.再次测试之后,小编逐一排查了可能性原因(正式版和测试版代码不一致,页面HTML代码错乱,css代码错误),但都未能解决问题.一个简单的select,怎么就出现问题了呢?百思不得其解.(至今也没有找到问题
-
bootstrap动态调用select下拉框的实例代码
html代码: <label for="classify" class="col-sm-2 control-label">填报部门:</label> <div class="col-sm-3"> <select class="selectpicker form-control" data-live-search="true" name="addid&quo
-
BootStrap中关于Select下拉框选择触发事件及扩展
Select下拉框的问题,想在选择一个选项后,前台显示做出变动,并且知道选择的是第几个选项. 这个很好解决: 如下: <div class="page-header"> <div class="form-horizontal"> <div class="control-label col-lg-0"> </div> <div class="col-lg-2"> <
-
bootstrap datetimepicker实现秒钟选择下拉框
bootstrap datetimepicker插件没有秒钟选择器,如果要想选择的时间精确到秒没有办法控制,虽然可以配置format:'yyyy-mm-dd hh:ii:ss',会将秒钟添加到输入框中,但是无法控制秒钟数值,默认为当前客户端的时间的秒钟. 本示例修改bootstrap datetimepicker源代码,如果配置了显示秒钟format:'......ss',将会给分钟选择器层添加秒钟选择下拉框,可以自定义选择时间的秒钟部分,效果如下 bootstrap datetimepicke
-
基于bootstrap实现多个下拉框同时搜索功能
本文实例为大家分享了bootstrap实现下拉框搜索展示的具体代码,供大家参考,具体内容如下 1.第一个下拉框代码 <div class="btn-group col-sm-3 col-xs-6 util-btn-margin-bottom-5 quick-search"> <!--快速查询--> <div class="input-group"> <span class="input-group-addon&qu
随机推荐
- Ajax全局加载框(Loading效果)的配置
- jQuery实现等比例缩放大图片让大图片自适应页面布局
- 常用JS代码实例小结第1/2页
- JS往数组中添加项性能分析
- Python 正则表达式的高级用法
- C# 注册表 操作实现代码
- Android 拍照并对照片进行裁剪和压缩实例详解
- JavaScript中boolean类型之三种情景实例代码
- Android仿支付宝中余额宝的数字动画效果
- php截取字符串之截取utf8或gbk编码的中英文字符串示例
- Nginx下支持Thinkphp URL Rewrite的配置示例
- Android仿美团网、大众点评购买框悬浮效果修改版
- Android中activity处理返回结果的实现方式
- Android五子棋游戏程序完整实例分析
- discuz Passport 通行证 整合笔记
- php用户注册时常用的检验函数实例总结
- C#中设置textbox限制条件的方法
- 聊聊Ajax提交form表单的看法和认识
- C语言中实现itoa函数的实例
- nginx反向代理二级域名绑定方法及注意事项