jQuery更改占位符文本颜色
Posted
技术标签:
【中文标题】jQuery更改占位符文本颜色【英文标题】：jQuery change placeholder text color 【发布时间】：2013-02-04 17:03:03 【问题描述】：是否可以在 jQuery 中使用 "::-webkit-input-placeholder" 来设置占位符文本的颜色？
类似这样的：
$("input::-webkit-input-placeholder").css("color" : "#b2cde0");
【问题讨论】：
看看这个：***.com/questions/2610497/… 很高兴看到这个：***.com/a/20886968/1830909 【参考方案1】：你不能真正用 javascript 修改伪选择器。您必须修改现有的 <style> element。
如果可能，创建一个类：
.your-class::-webkit-input-placeholder
color: #b2cde0
并将其添加到元素中：
$('input').addClass('your-class');
【讨论】：
我相信大多数时候使用 jQuery 为占位符文本设置样式的重点是动态颜色。【参考方案2】：如果您没有样式表，并且想要动态地注入 CSS，您可以使用以下方法：
$('body').append('<style>.my_class::placeholdercolor:red</style>')
只需使用 my_class 和 color 作为占位符。
有一个通用功能很方便：
function change_placeholder_color(target_class, color_choice)
$("body").append("<style>" + target_class + "::placeholdercolor:" + color_choice + "</style>")
用法：
change_placeholder_color('.my_input', 'red')
【讨论】：
【参考方案3】：只需添加这个。它将继承 input[type=text]:focus new color 中的颜色
.your-class ::placeholder color: inherit;
【讨论】：
【参考方案4】：这是一个使用 jQuery 动态设置伪元素样式的示例——它是创建一个 <style> 元素，将其文本内容设置为所需的样式声明，并将其附加到文档中。
这是一个简单的单页示例：
<!doctype html>
<html>
<head>
<title>Dynamic Pseudo-element Styles</title>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script>
$(document).ready(function()
createStyles();
$('#slider-font-size').on('change', createStyles);
function createStyles()
// remove previous styles
$('#ph-styles').remove();
// create a new <style> element, set its ID
var $style = $('<style>').attr('id', 'ph-styles');
// get the value of the font-size control
var fontSize = parseInt($('#slider-font-size').val(), 10);
// create the style string: it's the text node
// of our <style> element
$style.text(
'::placeholder ' +
'font-family: "Times New Roman", serif;' +
'font-size: ' + fontSize + 'px;' +
'');
// append it to the <head> of our document
$style.appendTo('head');
);
</script>
</head>
<body>
<form>
<!-- uses the ::placeholder pseudo-element style in modern Chrome/Firefox -->
<input type="text" placeholder="Placeholder text..."><br>
<!-- add a bit of dynamism: set the placeholder font size -->
<input id="slider-font-size" type="range" min="10" max="24">
</form>
</body>
</html>
【讨论】：
【参考方案5】：我使用的是 MaterializeCSS；我使用 Jquery 为这样的输入字段更新 CSS
$(".input-field").css("color", themeColor);
$(".input-field>.material-icons").css("color", themeColor);
$(".input-field>label").css("color", themeColor);
查看结果：
https://codepen.io/hiteshsahu/pen/EXoPRq?editors=1000
【讨论】：
该人指示他希望更改占位符样式而不是常规文本，以上是关于jQuery更改占位符文本颜色的主要内容，如果未能解决你的问题，请参考以下文章