兼容火狐浏览器的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下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...
随机推荐
- 59. jdk1.5新特性之----增强for循环
/*jdk1.5新特性之----增强for循环:底层是一个迭代器 作用:简化迭代器书写格式 使用范围:实现了Iterable接口的对象或者数组对象 格式: for(变量类型 变量名 :遍历目标 ...
- spring在注解标注的方法上加切面
之前以为只能在方法签名上加切面,今天发现注解上也能加切面 1.自定义一个注解(任意注解都可以,不一定是自定义的) @Target({ElementType.METHOD}) @Retention(Re ...
- 【SQL】Mysql常用sql语句记录
1.创建用户.赋予权限 CREATE DATABASE scadm DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci; CREATE USER 's ...
- vue基础三
1.模板语法 在底层的实现上, Vue 将模板编译成虚拟 DOM 渲染函数.如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量,你也可以不用模板,直接写渲染(render)函数,使用可 ...
- 【LeetCode 26】删除排序数组中的重复项
题目链接 [题解] 沙比提 [代码] class Solution { public: int removeDuplicates(vector<int>& nums) { if ( ...
- DOM学习总结(二)
一.什么是DOM属性 DOM属性简单来说就是HTML的属性值 二.常见的DOM属性有哪些? 1.innerHTML 属性 获取元素的内容,想要拿到某个元素的文本内容,直接在后面加 .innerHTML ...
- (转)ubuntu下如何安装使用SSH?
转:http://os.51cto.com/art/201109/291634.htm ubuntu默认并没有安装ssh服务,如果通过ssh链接ubuntu(比如使用securecrt客户端来访问ub ...
- (5)centos7 文件权限
一. 目录信息 1.第一列 一共10位 (1)第1位表示 当为[ d ]则是目录 当为[ - ]则是文件 若是[ l ]则表示为连结档(link file): 若是[ b ]则表示为装置文件里面的可供 ...
- python url编码与解码
上代码 #codeing:utf-8 from urllib import parse ori_url_10='http://192.168.0.10:3080/asg/portal.do?call= ...
- windows每天定时执行脚本
windows每天定时执行脚本 这里说的定时器就是Windows下的任务计划,当时遇到的坑正好总结一下,因为Windows10的定时器去执行脚本当时试了好多遍,都是没有成功,后来通过自己的观察发现是 ...