Tabs Style Colors

Dash Python
1

Hi all,

I’m having this tabs with target text color : white, for all tabs

and i want when a user hover the background would change to white and text color to grey for example,
because whenever i tried as the documentation suggested it over-write the first style i set

Screenshot 2023-04-09 114548

Thank you

1 Like
2

HI @Manar you could use CSS for that. An example:

import dash
from dash import html


app = dash.Dash(__name__)
app.layout = html.Div(
    'some random text, div changes background color and text color on hover',
    className='div_hover',
    style={'height': '600px'}
)


if __name__ == '__main__':
    app.run(debug=True, port=8051)

in your custom css file in the assets foler:

.div_hover {
  background-color: blue;
  color: white;
}

.div_hover:hover {
  background-color: white;
  color: black;
  transition: background-color 0.5s ease;
}

The transition is not necessary, it’s more a question of personal preference. More info (for example) here

dd

mred css

3 Likes
3

THANKS , it worked just fine when applied the class to dash attribute :
tabClassName=‘div_hover’ ,
labelClassName=‘div_hover’

4

Glad it worked. You can rename div_hover to whatever you want, just make sure you change the name in the css file too.

1 Like