css3怎样去掉select中三角箭头的背景

html-css010

css3怎样去掉select中三角箭头的背景,第1张

用插件：select2.js 百度搜索那个名字即可，现在基本是最好用的下拉组件。

原理就是将原来的select隐藏，用新的div构建一个下拉菜单，遮盖在原来的位置。

自己做的话，可以试试在select上覆盖一个div层，用绝对定位。然后把select的透明度opacity写为0.01，不能为0，然后点击那个层，就相当与点击了那个select，div写什么就由你定了。

div{

width: 20px

height: 20px

border: 2px solid #000

border-top: none

border-right: none

transform:rotate(45deg)

}

你可以做一个带箭头的div；然后样式如下：

div

{

/* 箭头的样式，你自己设计，下面是旋转的样式*/

transform:rotate(90deg)

-ms-transform:rotate(90deg)/* Internet Explorer */

-moz-transform:rotate(90deg)/* Firefox */

-webkit-transform:rotate(90deg)/* Safari 和 Chrome */

-o-transform:rotate(90deg)/* Opera */

}

这个是CSS3，所以浏览器并不是都兼容的。上面的deg就是角度单位度。