Navigation using in Librocket's RSS (CSS-ish)

Question

I'm a complete RSS/CSS noobie, and I'm having some trouble getting this code to work. Basically what I want to do is the following: have a navigation bar using the tabset element from Librocket (for an option screen). I'm having trouble maintaining an active / pressed state (to show the user which tab is active). I've tried using ":focus", but focus is lost once I click somewhere else. If i use ":active", the active state only remains if I hold the mouse button down on the object.

Anyway, here's the RSS code:

/* Force the tabset element to a fixed size. */
tabset
{
    display: block;
    width: 100%;
    height: 100%;
    border: solid;
}

/* Display the tab container as a block element 20 pixels high; it will
   be positioned at the top of the tabset. */
tabset tabs
{
    display: block;
    height: 20px;
}

/* Force each tab to only take up 80 pixels across the tabs element. */
tabset tab
{
    width: 80px;
    border: solid;
    border-width: 1px 1px 0 1px;
}

/* DOESN'T WORK
tabset tab:focus    
{
    background-color: #DEADBEEF;
    border: solid;
    border-width: 1px 1px 0 1px;
}*/

/* DOESN'T WORK
tabset tab:active
{
    background-color: #DEADBEEF;
    border: solid;
    border-width: 1px 1px 0 1px;
}
*/
/* Display the panel container as a block element 180 pixels high; it will
   be positioned below the tab container and take up the rest of the space
   in the tabset. */
tabset panels
{
    display: block;
    height: 100%;
    border: solid;
}

/* Fix each panel to take up exactly the panelled space. */
tabset panels panel
{
    display: block;
    width: 100%;
    height: 100%;
    border: solid;
    border-width: 1px 1px 0 1px;
}

And an excerpt of the RML (HTML-ish) code:

<game id="game">
    <tabset style="height: 100%;">
        <tab>Gameplay</tab>
        <panel>
            GAMEPLAY TAB GAMEPLAY TAB GAMEPLAY TAB GAMEPLAY TAB GAMEPLAY TAB <br />
        </panel>
        <tab>Video</tab>
        <panel>
            VIDEO TAB VIDEO TAB VIDEO TAB VIDEO TAB VIDEO TAB VIDEO TAB <br />
        </panel>
    </tabset>

I cannot use any javascript code, as Librocket doesn't support that. Thanks in advance!

There's no CSS automatic way to do this. Generally what is done on a website is a class would be added to the active element or the body tag or something which can then allow styling of the active element. Don't know if that will help you in this case. — Billy Moat, Aug 20 '12 at 22:04

score 2 · Answer 1 · answered May 06 '15 at 02:57

After hunting through the libRocket source code, I've found the following in ElementTabSet.cpp:

if (old_tab)
    old_tab->SetPseudoClass("selected", false);
if (new_tab)
    new_tab->SetPseudoClass("selected", true);

The active tab always has a :selected pseudo-class applied. Therefore, you can accomplish what you want as follows:

/* DOES WORK! */
tabset tab:selected
{
    background-color: #DEADBEEF;
    border: solid;
    border-width: 1px 1px 0 1px;
}

Navigation using in Librocket's RSS (CSS-ish)

1 Answers1