已从platform.js迁移至Google GSI Client，如何自定义谷歌登录按钮以统一用户体验？

Got it, let's fix this for you! The issue here is that google.accounts.id.renderButton() replaces the content of your target element (#glogin) with Google's default button markup, which is why your custom HTML gets overwritten. Here's how to use your own button while keeping the GSI functionality working:

Step 1: Update your JavaScript initialization #

Remove the renderButton call (since it's overwriting your custom button) and add a click event listener to trigger the Google login flow directly from your custom element:

window.onload = function () {
  google.accounts.id.initialize({
    client_id: "xxxxxxxxxxxxxxxx",
    callback: handleCredentialResponse
  });

  // Bind click handler to your custom button
  const googleLoginBtn = document.getElementById("glogin");
  googleLoginBtn.addEventListener("click", function(e) {
    e.preventDefault(); // Prevent the default link navigation behavior
    // Trigger Google's account selection/login popup
    google.accounts.id.prompt({
      prompt: "select_account" // Forces the account picker to appear
    });
  });

  // Optional: Keep this if you still want the One Tap dialog to show
  // google.accounts.id.prompt();
}

Step 2: Keep your custom HTML button #

Your existing custom button code stays exactly as it is—no changes needed here:

<li id="glogin"><a href="#"><img src="assets/images/land_login/auth_google.png" alt="Sign in with Google"></a></li>

How this works #

• e.preventDefault() stops the <a> tag from reloading the page, which is essential since we're handling the login action with JavaScript.
• google.accounts.id.prompt({prompt: "select_account"}) triggers the familiar Google account selection popup, ensuring your users get the same login flow they would with the default button—but now using your custom styling. If you prefer to use the One Tap flow when available (instead of forcing the popup), you can omit the prompt parameter and just call google.accounts.id.prompt().

Since your handleCredentialResponse function is already set up to process the login token, everything will work exactly as before—this just replaces Google's default button UI with your own.

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