select选择框在谷歌火狐和IE样式的不同

select选择在不同浏览器不同的显示样式，

　　　　在IE中虽然默认和谷歌一样，但是当点击时向下按钮消失，解决方法如下；

select {/*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/border: solid 1px #000;/*很关键：将默认的select选择框样式清除*/appearance:none;-moz-appearance:none;-webkit-appearance:none;/*在选择框的最右侧中间显示小箭头图片*/background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;/*为下拉小箭头留出一点位置，避免被文字覆盖*/padding-right: 14px;
}/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand { display: none; }

原理是将浏览器默认的下拉框样式清除，然后应用上自己的，再附一张向右对齐小箭头的图片即可。这样下拉按钮样式可以按照设计的PSD随意改动

然而在IE10以下appearance就不起作用会出现两个下拉按钮，所以此方法慎用！！

转载于:https://www.cnblogs.com/yangjie-space/p/4973921.html

select选择框在谷歌火狐和IE样式的不同相关推荐

AngularJs 基础教程 —— Select(选择框)
为什么80%的码农都做不了架构师?>>> 本文为 H5EDU 机构官方 HTML5培训教程,主要介绍:AngularJs 基础教程 -- Select(选择框) Angula ...
select选择框实现跳转
select选择框实现跳转零.启示 1.启示把bom里面的几个对象稍微有点印象,那么主干有了,学其它的就感觉添置加瓦,很简单就是关注树木的主干 2.万能的百度,不过当然要你基础好学得多才能看得懂, ...
纯CSS调整select选择框高度，兼容IE/Firefox/Opera/Safair/Chrome
在IE下直接用height.border定义select没有效果,目前大部分情况都是用js进行模拟,其实css也是可以做得到的,原理很简单,隐藏select选择框的原生边框,再用其他元素模拟内边距及边 ...
Antd点击select选择框，页面滚动，选项跟着滚动
遇到问题如下: 做项目时,采用antd与react技术方案,需要实现选择一个select选择框,发现点击select选择框时,滚动页面,选项内容整体跟着页面滚动,而select选择框不动,如图: 解决 ...
解决小米2s手机 select选择框问题
解决小米2s手机 select选择框文本内容不能改变中学习到的时间:2015-07-17 项目:甘肃银行-手机银行问题记录:有一组选择框,第一个选择框选择存储类型(零存整取.整存整取.定活两便), ...
AngularJS Select(选择框)
在AngularJS中可以使用数组或对象创建一个下拉列表对象选项. 1.使用ng-options创建选择框 <div ng-app="my" ng-controller=&q ...
手动清空Element Select选择框内容 v-model 和 option下拉框选项导致无法select选中，或者选中视图不渲染问题,
有时候一些需求,需要上下两个Select 进行联动,比如名称/id选择框的内容需要根据科目选中后的内容,来进行搜索,所以当科目清空后名称/ID 需要清空 v-model 的值.以及 el-op ...
element_UI select选择框深入解析
别问,问就是今天是1024,混个勋章 el-select介绍开发环境 Select Attributes(参数介绍) select各适用场景介绍使用最广泛的基础单选有禁用选项的选择框选择框禁用 ...
select选择框变得可以输入、编辑
一.可编辑的select 按回车键输入新内容,按DEL删除选中内容<br> <body bgcolor="#fef4d9" οnlοad="s1.foc ...
vue中select选择框的监听事件
template模板: <el-select v-model="valueClass" placeholder="请选择学生" class="s ...

select选择框在谷歌火狐和IE样式的不同

select选择框在谷歌火狐和IE样式的不同相关推荐

最新文章

热门文章