Skip to content

Instantly share code, notes, and snippets.

@skunkworker
Created January 28, 2020 06:35
Show Gist options
  • Save skunkworker/e3238e98d878fb7ea1d568f0513d5ccf to your computer and use it in GitHub Desktop.
Save skunkworker/e3238e98d878fb7ea1d568f0513d5ccf to your computer and use it in GitHub Desktop.
How to override sign in with google button using css selectors and psuedo elements.
<div class="g-signin2 signup-button" data-onsuccess="onSignIn" data-theme="dark" data-longtitle="true" data-width="250" data-height="50">
</div>
.signup-button {
span[id^="not_signed_in"] {
font-size: 0px;
}
span[id^="not_signed_in"]:before {
content: "Sign up With Google";
font-size: 16px;
}
span[id^="not_signed_in"]:after {
content: "";
font-size: 16px;
}
}
@skunkworker
Copy link
Author

The resulting html includes an element like
<span id="not_signed_inaabbccddeeff">Sign in with Google</span> where aabbccddeeff is a 12 character random id selector. So we can use the css3 [attribute^=value] selector on the id

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment