按钮CSS被user agent stylesheet覆盖，添加inline CSS后不可点击求助

问题原因分析 #

添加background-color: transparent; border-color: transparent;后按钮不可点击，大概率是以下两种情况：

• 按钮的可点击区域被严重压缩：默认按钮的点击区域包含背景和边框范围，当你把背景和边框设为透明却未保留边框宽度或内边距时，点击区域可能仅局限于文字部分，导致难以触发点击事件；
• 页面中存在其他元素（如绝对定位的层）覆盖在按钮上方，阻断了点击交互。

解决方案 #

方案1：用高优先级CSS选择器替代inline CSS（推荐） #

避免inline CSS的维护麻烦，通过提升选择器优先级覆盖浏览器默认样式，同时保证点击区域正常：

/* 组合类选择器优先级高于单个类，配合!important强制覆盖默认样式 */
.register-continue-with-google.register-continue-with {
  background-color: transparent !important;
  border-color: transparent !important;
  /* 保留足够内边距确保点击区域范围 */
  padding: 8px 16px;
  /* 明确设置光标样式，提示用户可点击 */
  cursor: pointer;
  /* 保留边框宽度，避免点击区域缩小 */
  border-width: 1px;
}

方案2：修复inline CSS的问题 #

如果必须使用inline CSS，补充必要样式保证点击区域和交互性：

<button class="register-continue-with-google register-continue-with" style="background-color: transparent; border-color: transparent; padding: 8px 16px; cursor: pointer; border-width: 1px;">Sign Up with Google</button>

额外排查步骤 #

打开浏览器开发者工具（F12），在「Elements」面板检查按钮元素，确认是否有其他元素的z-index值更高，覆盖在按钮上方。若有，调整对应元素的z-index或定位方式。

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