修改Google Translate小部件的边框尺寸问题

问题原因 #

你之前的CSS选择器错误：.goog-te-combo option:focus是针对下拉选项的聚焦状态，但实际选中时显示的边框是**下拉框本身（select元素，类名为.goog-te-combo）**的默认outline样式，选择器不匹配导致样式无效。

解决方案 #

方案1：修正选择器并提高样式优先级

直接针对下拉框的聚焦状态设置样式，用!important覆盖Google的默认样式：

.goog-te-combo:focus {
  /* 去掉边框 */
  outline: none !important;
  /* 或者自定义边框样式，比如：
  outline: 2px solid #4285f4 !important;
  outline-offset: 2px !important;
  */
}

方案2：增加选择器权重（若方案1无效）

如果Google的默认样式优先级更高，可通过更具体的选择器提升权重：

body #google_translate_element .goog-te-combo:focus {
  outline-width: 0 !important;
  outline: none !important;
  /* 可选：自定义边框 */
  border: 1px solid #ccc !important;
}

方案3：动态加载样式（若元素延迟渲染）

由于Google翻译小部件是动态插入页面的，若CSS样式提前加载未生效，可通过JS延迟设置：

setTimeout(() => {
  const translateCombo = document.querySelector('.goog-te-combo');
  if (translateCombo) {
    translateCombo.style.outline = 'none';
    translateCombo.style.border = '1px solid #ddd';
  }
}, 1000);

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