如何改变placeholder样式

placeholder是HTML5中新增的一个属性，它可以在输入框中显示提示文字，但是不影响输入框的功能。如果要改变placeholder的样式，可以使用css属性进行设置。

使用CSS属性改变placeholder样式

/* 设置placeholder的背景色 */
::-webkit-input-placeholder {
    background-color: #ccc;
}

/* 设置placeholder的字体大小 */
::-webkit-input-placeholder {
    font-size: 12px;
}

/* 设置placeholder的字体颜色 */
::-webkit-input-placeholder {
    color: #f00;
}

上面代码中，使用::-webkit-input-placeholder设置placeholder的背景色、字体大小和字体颜色。

使用JavaScript改变placeholder样式

// 获取输入框
var input = document.getElementById('input');

// 设置placeholder的背景色
input.style.backgroundColor = '#ccc';

// 设置placeholder的字体大小
input.style.fontSize = '12px';

// 设置placeholder的字体颜色
input.style.color = '#f00';

上面代码中，使用JavaScript获取输入框，设置placeholder的背景色、字体大小和字体颜色。

使用jQuery改变placeholder样式

// 获取输入框
var input = $('#input');

// 设置placeholder的背景色
input.css('backgroundColor', '#ccc');

// 设置placeholder的字体大小
input.css('fontSize', '12px');

// 设置placeholder的字体颜色
input.css('color', '#f00');

上面代码中，使用jQuery获取输入框，设置placeholder的背景色、字体大小和字体颜色。

placeholder是HTML5中新增的一个属性，它可以在输入框中显示提示文字，但是不影响输入框的功能。要改变placeholder的样式，可以使用CSS属性、JavaScript和jQuery来设置。