Got experience with CSS Selectors? Please help me select the Delete and Refresh buttons in Gmail

edited May 2011 in Style Development
Thanks for reading this. I generally use FF's DOM inspector to find the id's and classes to select, but this time my trial and error fails in Gmail's complicated CSS-web.

I'd like to hide the Delete & Refresh button (e.g. with "{ display: none !important; }"). Please tell me how to select them.

Thank you in advance.

PS. I want to delete the buttons as they result in an extra row on my inbox screen, when using multiple inboxes at the right side.


  • edited May 2011
    How about this:

    DIV[act="10"][class="J-Zh-I J-J5-Ji J-Zh-I-Js-Zq"][style="-moz-user-select: none;"],
    DIV[act="20"][class="J-Zh-I J-J5-Ji L3"][style="-moz-user-select: none;"]
    { display: none !important; }

    (but i don't use multiboxes and really wouldn't know).
  • Thanks, this deletes the Refresh button. The Delete button is unaffected, though.

    You don't need Multiple Inboxes to test whether the buttons disappear; use this template below and the Preview button to adjust selector until the delete button is gone:

    @namespace url(;
    /* Test Gmail: Hide Delete & Refresh buttons */
    @-moz-document domain("") {

    /* The first attempts to select 'Delete' the second 'Refresh': */
    DIV[act="10"][class="J-Zh-I J-J5-Ji J-Zh-I-Js-Zq"][style="-moz-user-select: none;"],
    DIV[act="20"][class="J-Zh-I J-J5-Ji L3"][style="-moz-user-select: none;"]
    { display: none !important; }

  • edited May 2011
    Oh, and hiding 'Report as Spam' would save me another row, please.
  • edited May 2011
    With Makondo's help, I succeeded!

    Shared on

    The buttons don't disappear until first mouse over, though. How can I change that?

  • edited May 2011
    The code works perfectly fine for me. Try this:

    /* report */ DIV[tabindex="0"][role="button"][act="9"][class="J-Zh-I J-J5-Ji J-Zh-I-Js-Zq J-Zh-I-Js-Zj"][style="-moz-user-select: none;"],
    /* delete */ DIV[tabindex="0"][role="button"][act="10"][class="J-Zh-I J-J5-Ji J-Zh-I-Js-Zq"][style="-moz-user-select: none;"],
    /* refresh */ DIV[tabindex="0"][role="button"][act="20"][class="J-Zh-I J-J5-Ji L3"][style="-moz-user-select: none;"]
    { display: none !important; }

    You don't need a separate block for each ID, combine them as in my code.

    sanderk said: ...With Makondo's help, I succeeded!..
    No, not 'with [my] help' but you simply took my code and posted as your style w/out even as much as thank you - that's a bad start. Not that i personally care, but it's a polite thing to do to thank people who help you and mention them in your style description, preferably with a link to their account page. Better start on a right foot here. Good Luck!

  • Thanks for replying.

    Greatly simplifying my code resulted in immediate application of the user style (as opposed to application at either button mouse-over or re-enabling user style). Now, it's simply: DIV[act="9"], DIV[act="10"], DIV[act="20"]{ display: none !important; }

    When I was playing around with the hiding of different buttons, I had separated them (and sadly that ended up in the previously uploaded version). Even though I ended up with hiding just the buttons with an easily selectable act-attribute, and thus one line of code, I've tried many different alternatives as well. With such straight-forward functionality, though, the result will look quite similar to your example. Your untested example, however, did not work; but I got your idea of using DIV[]. So, I've thanked you for the help (instead of plagiarizing) here.

    It would have been nice if I had mentioned you straight away in the user style description, and I've added it now, but it was still in development/had a bug. I uploaded it already for linking from this thread. I'm sorry if I offended you; but maybe it also helps to give strangers the benefit of the doubt.

    So, thanks again for your idea & replies.
  • edited May 2011
    As i said, it's not about me - i can't care less, personally. But there people who start here on a 'wrong foot' by simply reposting other people styles or just bits of code w/out mentioning that they didn't really spend more than a minute in putting it together and posting while somebody else has put (often quite a bit of) time on helping them or creating the original style. I find it rude, at least. Especially since it's not 'against the law' but is really a gift.
    In this case, i didn't do anything but gave you an idea what to play with and you did successfully. You don't have to mention me - there no written rules about it on this site but i thought i'd let you know what some of us think about this matter. For your future work, which i wish you good luck with Smile

    EDIT: since we're all alone here (wink), i'll tell you a story: i've helped people by actually creating a whole style for a site(-s) i never visit a few times in the past. This people either never come back to say if it worked for them or not, nor to thank me for the time i've spent helping them and will never get back. And i know this happens to other on this site. Yeah, that pisses me off but eventually i stopped caring (and helping ... but you did ask nicely Wink).
  • Thanks for sharing your story. I'm glad I've no bad experiences like that myself (yet). #-O

    Let's hope that the charitable spirit here won't be crushed by anonymous rudeness. :)>-

    Styling gmail & gcal has been a good CSS-practice, but I don't plan writing any other user styles anymore. I might share my collection of edited styles in a minimalistic gcal-pack for 1280x800, though.

    Good luck as well. :)
Sign In or Register to comment.