Guide for Softr Tabs Customization

Hi all,

For those who want a glimpse of what’s possible with customizing the Softr tab container=>

https://matt7933.softr.app/native-tabs

How to do this?

All css codes to be inserted in the header of the page settings.

Tab Design 1
<style>
#tab-container5 [role="tablist"] {
    border-bottom: 0px solid #FFFFFF !important;
}

#tab-container5 button:not([title="Prev"]):not([title="Next"]) {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    font-family: Arial, sans-serif;
    outline: none;
    transition: background-color 0.3s;
    border-radius: 15px 15px 0 0 / 15px 15px 15px 15px;
}

#tab-container5 button:hover:not([title="Prev"]):not([title="Next"]),
#tab-container5 button:active:not([title="Prev"]):not([title="Next"]),
#tab-container5 button[data-state="active"]:not([title="Prev"]):not([title="Next"]),
#tab-container5 button[data-state="active"]:hover:not([title="Prev"]):not([title="Next"]) {
    background-color: #F2F2F2 !important;
    border: none !important;
    border-radius: 15px 15px 0 0 / 15px 15px 15px 15px;
}
</style>
Tab Design 2 (same as design 1 but squared borders)
<style>
#tab-container4 [role="tablist"] {
    border-bottom: 0px solid #FFFFFF !important;
}

#tab-container4 button:not([title="Prev"]):not([title="Next"]) {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    font-family: Arial, sans-serif;
    outline: none;
    transition: background-color 0.3s;
}

#tab-container4 button:hover:not([title="Prev"]):not([title="Next"]),
#tab-container4 button:active:not([title="Prev"]):not([title="Next"]),
#tab-container4 button[data-state="active"]:not([title="Prev"]):not([title="Next"]),
#tab-container4 button[data-state="active"]:hover:not([title="Prev"]):not([title="Next"]) {
    background-color: #F4F2EE !important;
    border: none !important;
}
</style>
Tab Design 3
<style>
#tab-container3 button {
transition: font-size ease 0.2s !important;
}

#tab-container3 button:hover {
  font-size: 16px !important;
}

#tab-container3 button[data-state="active"] {
    font-size: 16px !important;
}
</style>
Tab Design 4
<style>
#tab-container2 [role="tablist"] {
    display: flex !important;
    justify-content: center !important;
}
</style>
Tab Design 5
#tab-container1 [data-testid="tab-button"]:hover,
#tab-container1 [data-testid="tab-button"][data-state="active"] {
    border-bottom: 2px solid #3278FF !important;
    color: #3278FF !important;
}

Note that if you have a lot of tabs or if you are on mobile, you will need to use the :not pseudo-class so that the left and right arrows (Prev/Next) appear for tab navigation.
By using the :not pseudo class I exclude these two arrows from the css rules I wrote.
You can see it in the codes of Tab Design 1 and Tab Design 2 (the use of :not is specific to these two tab containers as the written css rules apply to the whole button… While the left and right arrows are also inside a button element)

3 Likes

thanks, super helpful!

1 Like

Hi!
Thank you very much for the code. Again, it is something I was looking for and needed. One question: When I smell the code and on an ab sheet there is also an abel with action buttons, the action buttons are also affected by the code. How can I prevent this?

Hi Jacques,

What code do you use exactly?

<style>
#tab-container1 [role="tablist"] {
    border-bottom: 0px solid #FFFFFF !important;
}

#tab-container1 button:not([title="Prev"]):not([title="Next"]) {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    font-family: Arial, sans-serif;
    outline: none;
    transition: background-color 0.3s;
    border-radius: 15px 15px 0 0 / 15px 15px 15px 15px;
}

#tab-container1 button:hover:not([title="Prev"]):not([title="Next"]),
#tab-container1 button:active:not([title="Prev"]):not([title="Next"]),
#tab-container1 button[data-state="active"]:not([title="Prev"]):not([title="Next"]),
#tab-container1 button[data-state="active"]:hover:not([title="Prev"]):not([title="Next"]) {
    background-color: #F2F2F2 !important;
    border: none !important;
    border-radius: 15px 15px 0 0 / 15px 15px 15px 15px;
}
</style>

Can you test this:

<style>
#tab-container1 [role="tablist"] {
    border-bottom: 0px solid #FFFFFF !important;
}

#tab-container1 [data-testid="tab-button"]:not([title="Prev"]):not([title="Next"]) {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    font-family: Arial, sans-serif;
    outline: none;
    transition: background-color 0.3s;
    border-radius: 15px 15px 0 0 / 15px 15px 15px 15px;
}

#tab-container1 [data-testid="tab-button"]:hover:not([title="Prev"]):not([title="Next"]),
#tab-container1 [data-testid="tab-button"]:active:not([title="Prev"]):not([title="Next"]),
#tab-container1 [data-testid="tab-button"][data-state="active"]:not([title="Prev"]):not([title="Next"]),
#tab-container1 [data-testid="tab-button"][data-state="active"]:hover:not([title="Prev"]):not([title="Next"]) {
    background-color: #F2F2F2 !important;
    border: none !important;
    border-radius: 15px 15px 0 0 / 15px 15px 15px 15px;
}
</style>

[data-testid=“tab-button”] is the selector I added to be more precise (and it should be a long term selector for Softr => maintainable)

1 Like


Hi. Thanks! But:… That doesn’t work Look at the image

It does work, tested.

What is the exact code you have for this page?

Demo here: Action Buttons Design (2nd tab container at the bottom of the page)

1 Like

Hi! It works now. Maybe it was the cach of the browser… Thanks!!!

1 Like

Thanks Mat!

I have a question for you:
If I have an ADD form with 3 steps. I would like to place every step in a different tab. How do I manage the submit or save button?

I would like to use the tab container instead of the multi-step form.

Thanks

Hi Gabriel,

Unfortunately this is impossible to do this. Too much limitations regarding the tab and forms flexibility.
Custom code can do a lot in Softr, but this: clearly not :sweat_smile:.
Not to mention the workload to maintain it (if this was possible to do it).

A way better solution would be to hardcode a visual step component in a custom code block, just above the form, that would update each time you click a “back” or “next” button within the conditional form. But it would require a lot of work to make it 100% usable.

1 Like