兼容火狐浏览器的select下拉框样式
经常遇到这样的问题,在使用bootstrap框架的时候select选择框的样式在火狐浏览器上继承的是浏览器本身的样式,跟谷歌等其他的浏览器样式对比很难看,并且很难调整,但是!
好东西来了,现在能调成跟谷歌一样的样式,只需要设置兼容火狐的样式即可:
<link href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<style>
@-moz-document url-prefix() {
select.form-control {
-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;
}
}
</style>
兼容火狐浏览器的select下拉框样式的更多相关文章
- select 下拉框样式修改 option文字居右
select { direction: rtl; /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的sele ...
- 改变 select下拉框 样式
select{ outline: none; text-indent: 10px; height: 45px; line-height: 45px; width: 100%; border:1px s ...
- select下拉框美化
其实用下列CSS就可以解决,原理是将浏览器默认的下拉框样式清除,然后应用上自己的,再附一张向右对齐小箭头的图片即可. select { /*Chrome和Firefox里面的边框是不一样的,所以复 ...
- firefox浏览器中 bootstrap 静态弹出框中select下拉框不能弹出(解决方案)
问题出现场景1: 在firefox浏览器中在bootstrap弹出的modal静态框中再次弹出一个静态框时 select下拉框不能弹出选项 解决方案:去掉最外层静态框的 tabindex=" ...
- EF5+MVC4系列(7) 后台SelectListItem传值给前台显示Select下拉框;后台Action接收浏览器传值的4种方式; 后台Action向前台View视图传递数据的四种方式(ViewDate,TempDate,ViewBag,Model (实际是ViewDate.Model传值))
一:后台使用SelectListItem 传值给前台显示Select下拉框 我们先来看数据库的订单表,里面有3条订单,他们的用户id对应了 UserInfo用户表的数据,现在我们要做的是添加一个Ord ...
- select下拉框选择触发事件
我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: <select> <option value="0" ...
- 基于jQuery select下拉框美化插件
分享一款基于jQuery select下拉框美化插件.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 源码下 ...
- 一款基于jQuery的联动Select下拉框
今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...
- jQuery制作简洁的多级联动Select下拉框
今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...
随机推荐
- openwrt ssh免密登录
1 生成相关秘钥 dropbearkey -t rsa -f id_rsa dropbearkey -y -f id_rsa | grep "^ssh-rsa" >> ...
- vue中js获取组件实例
获取到的VM实例,外部js仍然能自由调用VM的一切属性和方法. <template> </template> <script> // 声明变量currVM let ...
- 6374. 【NOIP2019模拟2019.10.04】结界[生与死的境界]
题目 题目大意 给你一个数列,每次可以选择任意两个相邻的数\(x\)和\(y\),将其删去,并在原来位置插入\(x+2y\). 每次询问一个区间,对这个区间进行上述操作.求最后剩下的数最大是多少. 答 ...
- Java——is-a、is-like-a、has-a
3.8 is-a.is-like-a.has-a 3.8.1 is-a(类和类之间的继承关系,泛化关系) public class Animal{ public void method1() ; } ...
- Yii2增、删、改、查
$order_model = OrderHeader::find()->where(['user_id'=>$user_id, 'order_type'=>'1'])->and ...
- JavaScript 原生事件
1.原生事件的绑定:https://www.cnblogs.com/shsxt/p/7903216.html a.DOM0级事件: 1. 行内事件 2. 元素.on事件名=函数 b.DOM2级事件:a ...
- (转)4年python,总结一些改善Python程序的建议
自己写Python也有四五年了,一直是用自己的"强迫症"在维持自己代码的质量.都有去看Google的Python代码规范,对这几年的工作经验,做个简单的笔记,如果你也在学pythp ...
- error C3861: “L”: 找不到标识符
提示错误的语句:::CLSIDFromProgID(L("Shell.Application"), &clsid); 解决办法: 出现上面的错误是因为语法错误了,去掉字符串 ...
- sql server 2008 数据库数据类型
sql server 2008 数据库数据类型 一.数值型 int:整数类型,它的精度由执行机构确定.. smallint:短整数类型,它的精度由执行机构确定.. numeric(p,s):数值型,并 ...
- std::locale与boost::locale的学习
1. 什么是facet, locale facet ['fæsɪt]的原意,是宝石切割出来的一个平面. locale[ləʊˈkæl],表示本地化, locale the container that ...