在武汉网站制作过程中,我们就经常用到select下拉框表单,但是我们发现控制他的样式用简单的软件设置难以做到,他不像input那样可以改变默认文字颜色、文本框背景等,那么我们今天就给大家一个设置方法。首先来看看如何清除select默认样式,代码如下
select,option{
/*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/
border: none;
outline: none;
/*很关键:将默认的select选择框样式清除*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
/*将背景改为红色*/
background:#fff;
/*加padding防止文字覆盖*/
padding-right: .14rem;
}
/*清除ie的默认选择框样式清除,隐藏下拉箭头*/
select::-ms-expand {display: none;}
如何改变option项字体颜色呢?
如下js代码即可实现,不妨来试试哦!
<script>
$(function () {
var unSelected = "#999";
var selected = "#666";
$("select").css("color", unSelected);
$("option").css("color", selected);
$("select").change(function () {
var selItem = $(this).val();
if (selItem == $(this).find('option:first').val()) {
$(this).css("color", unSelected);
} else {
$(this).css("color", selected);
}
});
});
</script>