前阵子用的那个取巧的显示方法,因不是很好看,试图利用bootstrap等第三方插件去做UI设计的效果,失败,因无法自定义select的背景色(bootstrap若自定义select的背景色,但是会显示好丑的那种下拉大指示标,css代码冲突,或许有解决方法,但目前没找到,问题记录在这儿,后续待解决)。
现记录第二种解决方法:
直接隐藏select默认的指向小三角形
利用
appearance:none;
-moz-appearance:none;/*兼容火狐浏览器*/
-webkit-appearance:none;/*兼容Chrome浏览器*/
随后,对select标签,设置背景图片,背景图片右侧绘制一个向下的小三角形 ==
<select class="selectLanguage">
.......
</select>
.selectLanguage{
background:url("此处为图片引用路径") no-repeat scroll center transparent;
}
若出现三角形被select的字体盖住的问题,则:
在进行如下添加
.selectLanguage{
padding-right:20px;
}
此处像素大小,根据实际情况进行调整。