Question

我正在为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 …">

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

Answer 1

您需要使用评论中指出的::placeholder puesdo选择器。要仅针对该输入，只需使用::placeholder样式前面的选择器来定位该输入。

您可以使用一个选择器定位id以（^=）＆＃34;搜索形式＆＃34;开头的输入，或者只使用该ID，如果这些数字不会改变。

input[id^="searchform"]

＆＃13;

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;
}

＆＃13;

<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 …">

＆＃13;

CSS选择：Id中的占位符

1 个答案: