select默认下拉箭头改变option样式清除

Posted alantao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了select默认下拉箭头改变option样式清除相关的知识,希望对你有一定的参考价值。

谷歌、火狐、ie下 select 的默认下拉箭头图标差别还是比较大,一般我们都会清除默认样式,重新设计箭头图标;

/* --ie清除--*/

select::-ms-expand{ display: none; }

/* --火狐、谷歌清除--*/

select{
     appearance:none;  
    -moz-appearance:none;  
    -webkit-appearance:none;
     background: url("arrow.png") no-repeat scroll right center transparent;
     padding-right: 14px;
}
/* --箭头就用自己设计的箭头,padding 空出箭头的位置--*/

option样式的简单清除

option::-ms-expand{ display: none; }
option{
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari 和 Chrome */
    appearance:none;
}
/* --背景色字体颜色--*/
option:hover{
    color:#fff;
    background-color:#1E90FF;
}

//这些可以简单的解决一些问题,如果要求美观,就用ul,li等写吧,option很多属性样式不好控制;

以上是关于select默认下拉箭头改变option样式清除的主要内容,如果未能解决你的问题,请参考以下文章

css清除select的下拉箭头样式

清除Css中select的下拉箭头样式

如何改变select下拉框的样式

请教一下高手,怎么改变select下拉菜单的样式。右边那个默认的箭头很丑,怎么换成一个好看的箭头。

select 下拉框的样式改变

如何修改select标签的默认下拉箭头样式?