jQuery 更改占位符文本颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14967250/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery change placeholder text color
提问by Benny
Is it possible to use "::-webkit-input-placeholder" with jQuery to set a color for the placeholder text?
是否可以在 jQuery 中使用“::-webkit-input-placeholder”来设置占位符文本的颜色？
Something like this:
像这样的东西：
$("input::-webkit-input-placeholder").css({"color" : "#b2cde0"});
回答by Blender
You can't really modify pseudo-selectors with JavaScript. You'll have to modify an existing a <style>element.
您无法真正使用 JavaScript 修改伪选择器。您必须修改现有的 a<style>元素。
If possible, make a class:
如果可能，请创建一个类：
.your-class::-webkit-input-placeholder {
color: #b2cde0
}
And add it to the element:
并将其添加到元素中：
$('input').addClass('your-class');
回答by Cybernetic
If you don't have a stylesheet, and want to inject CSS dynamicallyyou can use the following:
如果您没有样式表，并且想动态注入 CSS，您可以使用以下命令：
$('body').append('<style>.my_class::placeholder{color:red}</style>')
Just use my_classand the colorfor the placeholder.
只需使用my_class和占位符的颜色。
It's handy to have a general purpose function:
拥有通用功能很方便：
function change_placeholder_color(target_class, color_choice) {
$("body").append("<style>" + target_class + "::placeholder{color:" + color_choice + "}</style>")
}
Usage:
用法：
change_placeholder_color('.my_input', 'red')
回答by franku
Just add this. It will inherit the color in input[type=text]:focus new color
只需添加这个。它将继承 input[type=text]:focus 中的颜色新颜色
.your-class ::placeholder{ color: inherit;}
回答by Hitesh Sahu
I was using MaterializeCSS; I used Jquery to update CSS for input fields like this
我使用的是 MaterializeCSS；我使用 Jquery 为这样的输入字段更新 CSS
$(".input-field").css("color", themeColor);
$(".input-field>.material-icons").css("color", themeColor);
$(".input-field>label").css("color", themeColor);
See Result:
查看结果：
回答by Chris Stringer
Here is an example of dynamically setting pseudo-element styles using jQuery – it's a matter of creating a <style>element, setting its text content to the desired style declarations, and appending it to the document.
下面是一个使用 jQuery 动态设置伪元素样式的示例——创建一个<style>元素，将其文本内容设置为所需的样式声明，然后将其附加到文档中。
Here is a simple single-page example:
这是一个简单的单页示例：
<!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>
