Style parameter for form buttons

[mo-rn]

Description

One of my coworkers is colorblind, and has trouble recognizing button state by its pale yellow vs light grey colors.

Alas, we can't style the submit button on a form, because the properties passed to a style method are applied to an outer div and then overridden by generated code.

Example:

import marimo

__generated_with = "0.16.4"
app = marimo.App(width="medium")


@app.cell
def _():
    import marimo as mo

    return (mo,)


@app.cell
def _(mo):
    form = mo.ui.text_area(placeholder="...").form()

    return (form,)


@app.cell
def _(form, mo):
    mo.vstack([form.style({'--action': '#ffdf13', '--action-hover': '#ffdf13aa'}), mo.md(f"Has value: {form.value}")])

    return


if __name__ == "__main__":
    app.run()

It only works when I use developer tools to disable the button styles, allowing the outer div styles to be applied:

I have no programmatic way to do this within Marimo!

Suggested solution

I would like to be able to pass button styles into the form constructor.

Are you willing to submit a PR?

• Yes

Alternatives

No response

Additional context

No response

[mscolnick]

Styles only apply to the top-level HTML element so it won't allow you to change the styles of the button. you may want to look into custom css https://docs.marimo.io/guides/configuration/theming/

[mo-rn]

Thanks @mscolnick. I understand that the .style method creates a div in the HTML, like my screenshot shows. That's why I'm suggesting a new feature. Maybe it could be limited to optional parameters like a button_color on the ui.form constructor (and the other things with buttons, like ui.button). The label parameter already accepts markdown, FWIW.

Custom CSS seems like a reasonable workaround given Marimo's current feature set, although it's a bigger hammer than I really want here, and I understand it doesn't offer much of a stable API. On the other hand, maybe we don't want to implement too much programmatic control over style within Marimo itself? But if so, why even have the style method in the first place?

Anyway, I do appreciate the suggestion!