Semi-transparent "shaded" layer over a radio group

[VivaldoMendes]

Description

I am writing a test involving 50 multiple-choice questions. Therefore, I will have 50 cells with radio bullets. I need two special requirements: they should be rendered horizontally (not vertically, as in the default), and a shaded form should be superimposed on them (no option available to my knowledge of a shaded layer).

After a few tries, I partially achieved what I needed. Unfortunately, I know how to do it only cell by cell, which is very inefficient given that I have to do it 50 times. The code I used for an individual cell is the following (and its output is located at the end of this issue):

radios = mo.ui.radio(
    options=["Option A", "Option B", "Option C"], 
    inline=True, 
    label="Select one"
)

shaded_radios = mo.Html(f"""
    <div style="position: relative; display: inline-block; padding: 10px;">
        {radios}
        <div style="
            position: absolute; 
            top: 0; left: 0; 
            width: 100%; height: 100%; 
            /* Use white (255, 255, 255) for dark mode */
            background: rgba(230, 230, 230, 0.25); 
            pointer-events: none; 
            border-radius: 20px;
            z-index: 5;
        "></div>
    </div>
""")

shaded_radios

I tried to apply a style to all radio buttons across my entire notebook using global CSS that uses mo.Html to inject a <style> block. I tried a large number of variants, but I failed in all cases. Does anyone know how achieve this? Some help would be greatly appreciated.

Thanks.

Suggested solution

Allow the choice of some shaded layer over a group of radio bullets

Are you willing to submit a PR?

• Yes

Alternatives

No response

Additional context

No response

[Light2Dark]

My initial thought is you can create a function to create these buttons for you and call them anywhere you need these custom buttons.

def create_button(options: list[...], label: str):
   ...

also you can use the .style method to make this easier

radios = mo.ui.radio(
    options=["Option A", "Option B", "Option C"],
    inline=True,
    label="Select one",
).style(
    {
        "background-color": "rgba(230, 230, 230, 0.25)",
        "padding": "10px",
        "border-radius": "20px",
    }
)

I think if you used global css, you need to edit the wrapper containing the button

div:has(> label + div[role="radiogroup"]) {
  background-color: ...
}