Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

Copy link
Owner Author

@skunkworker skunkworker commented Jan 28, 2020

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