Google Places API 如何修改自动补全结果框内Powered by Google Logo颜色？

架构老林

2026-9-30

失效原因

你的CSS没有生效主要是两个核心问题：

Google Places自动补全的结果容器.pac-container是SDK动态插入到页面body根节点下的独立元素，如果你在Vue/React等框架的带作用域限制的组件样式块（加了scoped属性/使用CSS Module）中写的这段样式，选择器会被框架加上专属属性前缀，无法匹配到全局的.pac-container元素。
默认的.pac-container::after伪元素已经预设了background-size、background-repeat、宽高等属性，仅覆盖background-image无法正常渲染新的Logo，同时SDK样式加载顺序晚于页面自定义样式，需要更高优先级的选择器才能覆盖。

可行解决方案

将修改Logo的样式放到全局样式文件中，不要加作用域限制
使用如下完整的覆盖样式，你可以根据实际使用的深色Logo尺寸调整宽高数值：

body .pac-container::after {
  content: "" !important;
  width: 120px !important;
  height: 14px !important;
  margin: 10px !important;
  background-image: url('/images/google/powered_by_google_on_non_white_hdpi.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  opacity: 1 !important;
}