select的三角形小三角形怎么显示

来源：蜘蛛抓取(WebSpider) 时间：2017-01-22 02:04 标签： select的三角形
不同的浏览器默认的select的选项图标是不同的，例如：
在chrome中，是这样的：
未点击时 && 点击时&
在Firefox中是这样的：
未点击时&&点击时 &
在IE9中是这样的：
未点击时&点击时&
其它浏览器大家可以自己尝试看看select的默认样式
下面开始正式介绍怎么替换：
这是我的html代码：
　　&select id="mySelect"&
　　　　&option value="bj"&北京&/option&
　　　　&option value="sh"&上海&/option&
　　　　&option value="tj"&天津&/option&
　　　　&option value="cq"&重庆&/option&
　　　&/select&
1、 首先，在css文件中，如果想改变select的默认边框，可以直接对其进行设置 &&注意：对IE不起作用&
#mySelect{
　　border:1 & /*将select的边框设置成红色*/
　　/*border:0; &或者border:none & & &如果不想要边框，可以这样设置 &&*/
在chrome中是这样的 &
在Firefox中是这样的
2、去除select默认的下拉图片 &&注意：对IE不起作用&
#mySelect{
　　border:1&
　　appearance:
　　-webkit-appearance: & /*去除chrome浏览器的默认下拉图片*/
　　-moz-appearance: &/*去除Firefox浏览器的默认下拉图片*/
在chrome和Firefox中都是下面图片的效果：
&3、添加自己的图片 &&注意：对IE不起作用&
&#mySelect{
　　border:1&
　　appearance:
　　-webkit-appearance: & /*去除chrome浏览器的默认下拉图片*/
　　-moz-appearance: &/*去除Firefox浏览器的默认下拉图片*/
　　background:url('tir.jpg') no-&
　　/*background:url('自己的图片路径') no- &将自己的图片放在select的最右边的中部，图片的位置可以通过background-position属性
　　　自己设置进行位置的微调*/&
设置后的样式是这样的：chrome和Firefox都是一样的
4、想让三角图片过去，给select设置宽度即可
#mySelect{
　　border:1&
　　appearance:
　　-webkit-appearance: & /*去除chrome浏览器的默认下拉图片*/
　　-moz-appearance: &/*去除Firefox浏览器的默认下拉图片*/
　　background:url('tir.jpg') no-&
　　/*background:url('自己的图片路径') no- &将自己的图片放在select的最右边的中部，图片的位置可以通过background-position属性
　　　自己设置进行位置的微调*/&
　　width：100
实现效果如下：chrome 和Firefox一样
注意：在某些老的Firefox版本中，可能设置完这些后，Firefox中的默认小三角还是在，如下图：
此时，在select选择器中添加
　　text-indent:0.01
　　text-overflow:"";
　　两个属性即可
#mySelect{
　　border:1&
　　appearance:
　　-webkit-appearance: & /*去除chrome浏览器的默认下拉图片*/
　　-moz-appearance: &/*去除Firefox浏览器的默认下拉图片*/
　　background:url('tir.jpg') no-&
　　width：100
　　text-indent:0.01
　　text-overflow:"";
阅读(...) 评论()1998人阅读
myWork--（44）
CSS就可以解决，原理是将浏览器默认的下拉框样式清除，然后应用上自己的，再附一张向右对齐小箭头的图片即可。
/*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
border: solid 1px #000;
/*很关键：将默认的select选择框样式清除*/
appearance:
-moz-appearance:
-webkit-appearance:
/*在选择框的最右侧中间显示小箭头图片*/
background: url(&http://ourjs.github.io/static/2015/arrow.png&) no-repeat scroll righ
/*为下拉小箭头留出一点位置，避免被文字覆盖*/
padding-right: 14
/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand { display: }
参考链接：
http://uplifted.net/programming/change-default-select-dropdown-style-just-css/
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：53586次
积分：3136
积分：3136
排名：第8824名
原创：231篇
转载：95篇
译文：26篇
(8)(1)(5)(11)(16)(1)(5)(36)(9)(134)(3)(88)(21)(7)(1)(10)4937人阅读
下拉框三角换成图、重构select、下拉框样式、select样式&&
16:44:26|&&分类：&举报字号&
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：746159次
积分：7956
积分：7956
排名：第2009名
原创：113篇
转载：243篇
评论：111条
(2)(1)(1)(2)(1)(1)(3)(2)(1)(2)(1)(1)(4)(4)(1)(1)(6)(2)(1)(3)(1)(2)(3)(1)(8)(5)(4)(1)(1)(4)(10)(14)(14)(29)(10)(3)(1)(9)(11)(11)(4)(5)(19)(2)(3)(2)(2)(2)(2)(2)(1)(2)(1)(1)(1)(1)(1)(1)(4)(4)(1)(3)(3)(1)(1)(1)(2)(4)(9)(9)(3)(3)(3)(20)(7)(44)(1)

我要回帖

更多关于 select的三角形 的文章

 

随机推荐