Textarea glow on click

Dash Python
1

Hi,

In my read-only textareas, they have a darkshading whenever they are clicked. I want to remove this, but have so far been unable to. How can I make it so they are simply static elements with no shading when they are clicked. Below is an example of one.

dcc.Textarea(
                                value = 'MRN - Ep',
                                readOnly = True,
                                style = {
                                    'textAlign': 'center', 
                                    'color': '#636E72',
                                    'width': '30%',
                                    'height': 80,
                                    'font-family': 'font-family: -apple-system, BlinkMacSystemFont, sans-serif',
                                    'font-size': '40px',
                                    'borderColor': 'rgba(255,255,255,0)',
                                    'border-radius': '25px',
                                    'background-color': 'rgba(255,255,255,0)',
                                    'font-weight': 'bold',
                                    'margin-top': '5%',
                                    'margin-left': '-6.5%',
                                    'overflow': 'auto',
                                    'outline': 'none',
                                    '-webkit-box-shadow': 'none',
                                    '-moz-box-shadow': 'none',
                                    'box-shadow': 'none',
                                    '-dcc-box-shadow': 'none',
                                },
                            ),

All other stylings have been successfully removed, except when they are clicked, the dark shading appears around it.

2

Hello @piacobelli,

Welcome to the community!

You’d have to do this through a css style sheet, as thing a specific attribute that you cannot access from the dash side.

The css file can just sit in your assets folder, and be something like this:

.dash-textarea:focus {
     background-color: white
}

I don’t know what the class and effect are, but hopefully this gets you moving in the right direction.

3

If these are static text areas, it might be easier to use an html.Div and the add the style you want, rather than starting from a dcc.Textarea and removing the style.