通过js修改input、select默认字体颜色

你是否想过自定义你的网页中的输入框和选择框的默认字体颜色？下面，我将为你展示如何通过JavaScript来实现这一功能。

一、textarea的默认字体颜色和获取焦点后的颜色设置

当我们为textarea设置默认字体颜色并在获取焦点后改变颜色时，可以通过以下方式实现。当元素获取焦点时，默认文字会消失并改变颜色。

```html

输入您要输入的内容

```

通过JavaScript实现颜色变化：

```javascript

document.getElementById('textarea').onfocus = function() {

if(this.value == '获取到元素焦点'){

this.value = '';

this.style.color = '000';

}

};

document.getElementById('textarea').onblur = function() {

if (this.value == '') {

this.value = '元素焦点消失';

this.style.color = '999';

}

};

```

二、select和option的颜色变化

我们可以通过JavaScript来改变select的默认选中项颜色和选中的选项的颜色。下面是一个简单的实现方式：

```javascript

var unSelected = "999"; //未选中颜色为灰色

var selected = "333"; //选中后颜色为黑色

$(function () {

$("select").css("color", unSelected); //设置select默认颜色

$("option").css("color", selected); //设置option默认颜色

$("select").change(function () { //监听变化事件

var selItem = $(this).val(); //获取选中的值

if (selItem == $(this).find('option:first').val()) { //如果是第一项则设置为未选中颜色

$(this).css("color", unSelected);

} else { //否则设置为选中颜色

$(this).css("color", selected);

}

});

});

```

三、input输入框的默认值处理及颜色变化

对于带有默认值的input输入框，我们可以通过JavaScript来实现点击后默认值消失，输入值变为黑色。下面是一个简单的示例：

```html

```

对应的JavaScript处理：

```javascript

$(function() {

//集体调用类型为text的input元素

$(".form input[type='text']").each(function(){

$(this).setDefauleValue();

});

//单个调用特定id的input元素

$("key").setDefauleValue();

});

//设置默认值及颜色变化的处理函数

$.fn.setDefauleValue = function() {

var defauleValue = $(this).val();

$(this).val(defauleValue).css("color","eee"); //设置默认颜色为灰色

return this.each(function() {

$(this).focus(function() {

if ($(this).val() == defauleValue) {

$(this).val("").css("color","000");//输入时变为黑色

}

}).blur(function() {

if ($(this).val() == "") {

$(this).val(defauleValue).css("color","999");//失去焦点后恢复默认灰色

}

});

});

};

``` 以上，就是通过JavaScript来修改input、select的默认字体颜色以及实现一些交互效果的方法。你可以根据自己的需求进行修改和调整，以达到更好的用户体验。