通过 jQuery 更改 iOS 的输入占位符样式属性答案

【问题标题】：Change input's placeholder's style-attributes for iOS through jQuery通过 jQuery 更改 iOS 的输入占位符样式属性
【发布时间】：2026-02-18 23:45:01
【问题描述】：

对于其他浏览器，只需设置 #input-element { color: red; } 就足以同时为输入的占位符文本着色 (<input type="text" placeholder="foo" />)。

但是，iOS 上并非如此；这需要以下内容（也许更合适，但仍然）：

#input-element::-webkit-input-placeholder { color: red; }

好的，没问题。但是，我正在尝试使用 jQuery 来做到这一点，但没有取得多大成功。我尝试了以下方法：

$("#input-element::-webkit-input-placeholder").css('color', 'red');
$("#input-element").css('::-webkit-input-placeholder', 'color: red'); // not according to .css documentation: I'm aware

但是，这些都没有任何改变。我试图避免将 ($(head).append("<style>.."); 样式直接附加到文档中。

如何通过 jQuery 更改输入的占位符样式属性——保持 iOS 兼容性？

【问题讨论】：

如果不附加到头部，我不确定这是否可行。这与尝试更改样式的:hover 属性基本相同。它是一个伪类，不能通过 jQuery 的 css 或 Javascript 的 DOM API 直接修改。你可以看看*.com/questions/311052/…
查看此解决方案：*.com/questions/11394217/…
@jValdron 这正是 OP 所说的他们想要避免
@Ian 我知道，但正如您所指出的，它可能是唯一的解决方案之一。
@jValdron 是的，但我猜这是他们已经发现并在他们说不想使用时引用的问题。除非我看到那个问题，否则我永远不会想到使用这种技术，但我想这就是我

标签： javascript jquery ios css

【解决方案1】：

为什么不直接切换 CSS 类？

CSS：

input[type=text]::-webkit-input-placeholder { color: red; }

.blue-pl::-webkit-input-placeholder {
    color: blue !important;
}

JavaScript：

$('#input-element').click(function(){$(this).addClass('blue-pl'); });

这适用于我的 iOS 6 iPhone。

jsFiddle demo

【讨论】：