html - CSS 选择 :placeholder within an Id

标签 html css wordpress css-selectors searchbar

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

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

最佳答案

您需要像评论中指出的那样使用 ::placeholder puesdo 选择器。要仅针对该输入,只需在 ::placeholder 样式前面使用选择器以仅针对该输入。

您可以使用一个选择器来定位其 id 以 (^=) "searchform"开头的输入,或者如果这些数字不变则只使用该 id。

输入[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 …">

关于html - CSS 选择 :placeholder within an Id,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50143072/

相关文章:

php - 获取 Woocommerce 订阅开始日期

php - wp_query 中的分页

html - CSS Chrome - 高度为 0px(和上下边框)的 Div 不可能

Javascript:可以在当前完成之前执行前行吗?

php - 如何删除输入表单中的引号前

Mysql 删除所有具有给定 meta_key 的帖子

javascript - 从输入文本字段获取数据,然后在同一页面上的 MySQL 语句中使用它

html - 下拉菜单中的 Logo 未与链接内联

html - 如何使 textarea 元素填充整个父 div 网格框(使用 angular-gridster2 或 gridster 库)?

javascript - 如何在 html5、canvas、javascript 中将图像缩放到更大?