下拉列表旁指下箭头及字体颜色等样式修改（2）

前阵子用的那个取巧的显示方法，因不是很好看，试图利用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;

}

此处像素大小，根据实际情况进行调整。

 

转载于:https://www.cnblogs.com/fhychzu/p/5345095.html