经常遇到这样的问题,在使用bootstrap框架的时候select选择框的样式在火狐浏览器上继承的是浏览器本身的样式,跟谷歌等其他的浏览器样式对比很难看,并且很难调整,但是!

好东西来了,现在能调成跟谷歌一样的样式,只需要设置兼容火狐的样式即可:

  1.   <link href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
  2. <style>
  3. @-moz-document url-prefix() {
  4. select.form-control {
  5. -moz-appearance: none;
  6. appearance: none;
  7. background-image: url("http://221.228.109.114:8083/manage/more/firefox_select_icon.png");
  8. background-repeat: no-repeat;
  9. background-position: calc(100% - 7px) 50%;
  10. background-size: 2% auto;
  11. border-radius:3px;
  12. padding:0;
  13. }
  14. }
  15. </style>

兼容火狐浏览器的select下拉框样式的更多相关文章

  1. select 下拉框样式修改 option文字居右

    select { direction: rtl; /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的sele ...

  2. 改变 select下拉框 样式

    select{ outline: none; text-indent: 10px; height: 45px; line-height: 45px; width: 100%; border:1px s ...

  3. select下拉框美化

      其实用下列CSS就可以解决,原理是将浏览器默认的下拉框样式清除,然后应用上自己的,再附一张向右对齐小箭头的图片即可. select { /*Chrome和Firefox里面的边框是不一样的,所以复 ...

  4. firefox浏览器中 bootstrap 静态弹出框中select下拉框不能弹出(解决方案)

    问题出现场景1: 在firefox浏览器中在bootstrap弹出的modal静态框中再次弹出一个静态框时 select下拉框不能弹出选项 解决方案:去掉最外层静态框的 tabindex=" ...

  5. EF5+MVC4系列(7) 后台SelectListItem传值给前台显示Select下拉框;后台Action接收浏览器传值的4种方式; 后台Action向前台View视图传递数据的四种方式(ViewDate,TempDate,ViewBag,Model (实际是ViewDate.Model传值))

    一:后台使用SelectListItem 传值给前台显示Select下拉框 我们先来看数据库的订单表,里面有3条订单,他们的用户id对应了 UserInfo用户表的数据,现在我们要做的是添加一个Ord ...

  6. select下拉框选择触发事件

    我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: <select> <option value="0" ...

  7. 基于jQuery select下拉框美化插件

    分享一款基于jQuery select下拉框美化插件.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下 ...

  8. 一款基于jQuery的联动Select下拉框

    今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...

  9. jQuery制作简洁的多级联动Select下拉框

    今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...

随机推荐

  1. js取整 - 优雅版(装逼必备)

    var a = 2.98; var z1 = ~~a; var z2 = a | 0; var z3 = a>>0; console.log(z1, z2, z3);     // 2, ...

  2. 对于异步编程Await和Async的理解

    public class AsyncInSync { /// <summary> /// 同步代码里有异步代码 /// /// /// 结果 /// Main Thread Before ...

  3. js关闭当前窗口的几种方法

    第一种:不带任何提示关闭窗口的js代码 <a href="javascript:window.opener=null;window.open('','_self');window.cl ...

  4. 【LeetCode 25】K 个一组翻转链表

    题目链接 [题解] 模拟就好. 就k个k个节点地翻转. 每个节点都把next域指向它前面那个节点 修改完之后把这个节点前面的那个节点的next域改成这一段的最后一个节点. 然后把这一段最左边的那个节点 ...

  5. SQL中忘记用户登陆密码该如何修改

    1.每个数据库登陆之前都必须先启动它本身的数据服务,SQL数据库也不例外,首先我们要做的是先打开我们的SQL数据服务! 2.随后在我们的开始菜单中找到我们的SQL启动图标,打开即可 3.弹出登录窗体( ...

  6. SQL server 数据库安装

    一.安装 1.点击setup双击 2.选择第一条-安装一个新的SQLserver 3.一路点击next 4.product Key-选择第一个:试用版 5.setup Role-选择所有 6.sell ...

  7. 超好用的thinkphp5.0/thinkphp5.1分页插件!详细使用步骤(内附代码)

    效果 tp5.0使用方法 page下载地址:进入下载页面 提取码:s75k 1,把page文件夹整个目录复制到 目录extend下 2,修改默认配置 app/config.php 把里面的 'pagi ...

  8. 敏捷在《PMBOK指南》知识领域中的应用

    <PMOBOK指南>知识领域 敏捷工作过程中的应用 第四章 项目整合管理 迭代和敏捷方法能够促进团队成员以相关领域专家的身份参与整合管理.团队成员自行决定计划及其组件的整合方式.在适应型环 ...

  9. 结合Intel Manual和libdasm学习汇编指令

    参考:http://www.intel.com/content/www/us/en/processors/architectures-software-developer-manuals.html h ...

  10. Excel简单应用

    数据透视表的简单应用 LEN.LENB MID LEFT,RIGHT CONCATENATE 和 & TRIM(去掉前后空格) 和 SUBSTITUDE(去空格,包括字符串之间的空格) FIN ...