CSS设置搜索框input placeholder颜色不生效问题求助

• 你之前的代码选择器里带的.fill_inited是JS动态追加的类，存在样式加载时序问题：CSS加载时这个类还没加到input上，自然无法命中规则。
• 部分浏览器默认会给placeholder加opacity透明度属性，就算改了color值，透明度不对也会看起来是白色/浅灰色。
• WordPress主题、插件自带样式权重高于你写的自定义CSS，规则被覆盖。
• 注意：所有浏览器前缀的placeholder选择器绝对不能用逗号合并在同一个规则块里，只要规则里有一个浏览器不识别的选择器，整段规则就会被丢弃，必须每个前缀对应独立的规则块。

把下面的代码粘贴到WordPress后台「外观 → 自定义 → 额外CSS」栏位保存，这个位置的样式优先级最高，不会被主题/插件原有样式覆盖：

/* Chrome/Safari/Opera 适配 */
input.search-field::-webkit-input-placeholder {
  color: #000000 !important;
  opacity: 1 !important;
}
/* Firefox 19+ 适配 */
input.search-field::-moz-placeholder {
  color: #000000 !important;
  opacity: 1 !important;
}
/* IE 10+ 适配 */
input.search-field:-ms-input-placeholder {
  color: #000000 !important;
  opacity: 1 !important;
}
/* Edge 适配 */
input.search-field::-ms-input-placeholder {
  color: #000000 !important;
  opacity: 1 !important;
}
/* 现代浏览器标准写法 */
input.search-field::placeholder {
  color: #000000 !important;
  opacity: 1 !important;
}

加完代码记得清空站点缓存插件的缓存、浏览器本地缓存再刷新页面，避免缓存导致样式不生效。

如果上面的CSS因为主题特殊结构还是不生效，可以把下面的代码粘贴到主题的页脚脚本设置里，或者用自定义JS插件加载：

document.addEventListener('DOMContentLoaded', function() {
  // 命中所有搜索框
  const searchBoxes = document.querySelectorAll('input.search-field[type="search"]');
  searchBoxes.forEach(box => {
    // 给无ID的搜索框补随机ID，保证样式精准命中
    if (!box.id) {
      box.id = 'custom-search-' + Math.random().toString(36).slice(2, 8);
    }
    // 动态插入最高权重的样式
    const placeholderStyle = document.createElement('style');
    placeholderStyle.textContent = `
      #${box.id}::-webkit-input-placeholder {color:#000 !important;opacity:1 !important;}
      #${box.id}::-moz-placeholder {color:#000 !important;opacity:1 !important;}
      #${box.id}:-ms-input-placeholder {color:#000 !important;opacity:1 !important;}
      #${box.id}::-ms-input-placeholder {color:#000 !important;opacity:1 !important;}
      #${box.id}::placeholder {color:#000 !important;opacity:1 !important;}
    `;
    document.head.appendChild(placeholderStyle);
  });
});

内容的提问来源于stack exchange，提问作者user5566016