把select的小图标替换成 自己想要的图片

不同的浏览器默认的select的选项图标是不同的,例如:

在chrome中,是这样的:

未点击时    点击时 

在Firefox中是这样的:

未点击时  点击时  

在IE9中是这样的:

未点击时 点击时 

其它浏览器大家可以自己尝试看看select的默认样式

下面开始正式介绍怎么替换:

这是我的html代码:

<div>
  <select id="mySelect">
    <option value="bj">北京</option>
    <option value="sh">上海</option>
    <option value="tj">天津</option>
    <option value="cq">重庆</option>
   </select>
</div>

1、 首先,在css文件中,如果想改变select的默认边框,可以直接对其进行设置   注意:对IE不起作用 

#mySelect{

  border:1px solid red;   /*将select的边框设置成红色*/

  /*border:0;  或者border:none      如果不想要边框,可以这样设置   */

}

设置完后

在chrome中是这样的

在Firefox中是这样的

2、去除select默认的下拉图片   注意:对IE不起作用 

#mySelect{

  border:1px solid red;

  appearance: none;

  -webkit-appearance: none;   /*去除chrome浏览器的默认下拉图片*/

  -moz-appearance: none;  /*去除Firefox浏览器的默认下拉图片*/

}

在chrome和Firefox中都是下面图片的效果:

3、添加自己的图片   注意:对IE不起作用 

#mySelect{

  border:1px solid red;

  appearance: none;

  -webkit-appearance: none;   /*去除chrome浏览器的默认下拉图片*/

  -moz-appearance: none;  /*去除Firefox浏览器的默认下拉图片*/

  background:url(‘tir.jpg‘) no-repeat right center;

  /*background:url(‘自己的图片路径‘) no-repeat right center;  将自己的图片放在select的最右边的中部,图片的位置可以通过background-position属性

   自己设置进行位置的微调*/ 

}

设置后的样式是这样的:chrome和Firefox都是一样的

4、想让三角图片过去,给select设置宽度即可

#mySelect{

  border:1px solid red;

  appearance: none;

  -webkit-appearance: none;   /*去除chrome浏览器的默认下拉图片*/

  -moz-appearance: none;  /*去除Firefox浏览器的默认下拉图片*/

  background:url(‘tir.jpg‘) no-repeat right center;

  /*background:url(‘自己的图片路径‘) no-repeat right center;  将自己的图片放在select的最右边的中部,图片的位置可以通过background-position属性

   自己设置进行位置的微调*/ 

  width:100px;

}

实现效果如下:chrome 和Firefox一样

注意:在某些老的Firefox版本中,可能设置完这些后,Firefox中的默认小三角还是在,如下图:

此时,在select选择器中添加

  text-indent:0.01px;

  text-overflow:"";

  两个属性即可

#mySelect{

  border:1px solid red;

  appearance: none;

  -webkit-appearance: none;   /*去除chrome浏览器的默认下拉图片*/

  -moz-appearance: none;  /*去除Firefox浏览器的默认下拉图片*/

  background:url(‘tir.jpg‘) no-repeat right center;

  width:100px;

  text-indent:0.01px;

  text-overflow:"";

}

 
时间: 2024-10-22 05:05:23

把select的小图标替换成 自己想要的图片的相关文章

如何将网页的title前面的图标替换成自己的图标

首先要准备自己的图标,图标必须是.ico格式的图片,网上有很多在线工具可以将自己的图片转换成ico格式的图片,这里给大家介绍两个网站 在线ico转换工具:生成的图标是可以选尺寸的,原图片的大小不限制 http://www.bitbug.net/   生成的图标背景是图片的背景,图片如果为透明背景,那么生成的ico图标也是透明的 例如:<link rel="shortcut icon" href="/favicon.ico"/>

静态资源文件自动压缩并替换成压缩版本(大型网站优化技术)

原文:静态资源文件自动压缩并替换成压缩版本(大型网站优化技术) 这一次,我总结和分享一项大型网站优化技术,那就是在项目中自动压缩静态资源文件(css.js),并让网站自动加载压缩后的资源文件.当然,这项技术在雅虎35条前端优化建议里也有记载,但它那只是给出一个理论的方案而已,并且采用的是外部压缩工具去压缩,而在我的项目中,是直接通过自己的程序自动化去压缩所有css.js文件,然后让页面直接加载所压缩后的资源,接下来直接进入主题. 本次实验使用的是PHP脚本语言,版本是PHP5.6,是在LINUX

数据库中将null 替换成 0 或者其他文本

Oracle:可以用nvl(p1,p2) 该函数,将p1替换成p2, 但是请注意:p1,p2必须是同类型的,可以是数值number ,char ,date 比如不能nvl('jack',5)这样用,一个是char一个是number了 简单明了:nvl(null,0) 就可以解决了. 这里要说明一下小tip:在oracle中 当组函数[又名聚合函数]要处理数据全是空的时候,除了count()函数返回的是0,其他组函数全部返回空值. 所以当我们处理聚合函数的时候,count()函数不用特殊考虑. S

discuz x3.2修改浏览器头部小图标,使网站看起来更专业

1 准备ico格式小图标,可以先用ps制作30*30大小的jpg文件然后用在线工具转换成ico格式推荐使用:http://www.ico.la/ 这里本站选择20*20大小的ico文件 详情请参考原文链接: http://www.infosz.com/forum.php?mod=viewthread&tid=660

列表前显示的小图标

列表信息展示有时候会在每行前使用小图标来美化,布局通常也会用到ul li: 1.如果是1张小图标 一般会用background属性来显示图标,background-image:url(); background-repeat: no-repeat; background-position:left center; 另外还可以使用list-style,该属性按顺序有3个值:list-style-type, list-style-position, list-style-image list-sty

[转]网站地址栏小图标favicon.ico的制作方法

有人也许会好奇,有的网址前面有个漂亮的小图标而且有的网站图标还会动,这是怎么做到的呢? 如下图所示: 那个小图标有个名字叫favicon.ico,网站图标虽小但可以起到很好的点缀作用,尤其是当浏览者将你的网站放入收藏夹之后,网站图标的作用就出来了,它可以使你的站点在众多网址中突出显示,对于用户体验起到很好的作用,好了,废话不多说,现在来告诉大家怎么做favicon.ico这个网站图标文件. 虽然现在有很多在线制作网站图标的网站,但制作出来的图标实在是差强人意,而且不支持透明样式的ico,这非常糟

使用&lt;link&gt; 标签定义浏览器标题栏小图标

使用link标签的rel属性,设置成icon.同时设置href属性值为小图标图片的url. <link rel=" icon " href="image/icon.png" />

过滤HTML控件,将输入控件替换成SPAN

/* 功能:过滤HTML控件,将输入控件替换成SPAN Author: jop DateTime: 2008-12-29 参数说明:elements 要删除的控件数组: */ function RemoveControl(elements) { var arrObj = new Array(); var count = elements.length; for(var i=0;i<count;i++) { if(elements[i] == undefined) continue; var ob

CSS从大图片上截取小图标

一张图片,用CSS分割成多个小图标. css样式: .icon{ background:url(../images/tabicons.png) no-repeat;width:18px; line-height:18px; display:inline-block;} .tu0101{background-position:-0px -0px;} .tu0201{background-position:-20px -0px;} .tu0301{background-position:-40px