CSS 选择：ID 中的占位符

Posted 2023-03-06

【中文标题】CSS 选择：ID 中的占位符

【英文标题】：CSS Select :placeholder within an Id

【发布时间】：2018-10-13 01:27:55

【问题描述】：

我正在为 Wordpress 网站上的搜索栏设置样式，我只需要修改该栏的占位符文本。我无权访问 html。

这是我目前的代码：

#searchform-5aea17efae9386\.31889305 border-radius:25px;

我需要占位符文本为color:#d2d4d3 - 我尝试的所有方法都更改了占位符文本的每个实例的颜色，而不是针对特定的搜索栏。

这里是 HTML

<input itemprop="query-input" type="search" name="s" id="searchform-5aea17efae9386.31889305" placeholder="Search this website …">

任何帮助都会很棒，谢谢。

【问题讨论】：

可能重复：***.com/questions/2610497/…

Change an HTML5 input's placeholder color with CSS的可能重复

【参考方案1】：

您需要像 cmets 中指出的那样使用 ::placeholder puesdo 选择器。要仅针对该输入，只需在 ::placeholder 样式前面使用选择器即可仅针对该输入。

您可以使用选择器来定位 id 以 (^=)“searchform”开头的输入，或者如果这些数字没有变化，则仅使用该 ID。

input[id^="searchform"]

input[id^="searchform"]::-webkit-input-placeholder  
  color: red;

input[id^="searchform"]::-moz-placeholder  
  color: red;

input[id^="searchform"]:-ms-input-placeholder  
  color: red;

input[id^="searchform"]:-moz-placeholder  
  color: red;

<input itemprop="query-input" type="search" name="s" id="searchform-5aea17efae9386.31889305" placeholder="Search this website …">

<br /><br />

<input itemprop="query-input" type="search" name="s" placeholder="Search this website …">