How do I change color of TextInput widget when using FastGridTemplate

Panel
1

I am using FastGridTemplate and FastListTemplate where I have declared an Accent Colour which is orange. All my TextInput widget border are orange color. I am validating the user input in the TextInput widget. If there is any error I want to change the border color of TextInput widget to red. I am not able to do that.
I used css_classes and declared a separate css file as well. No change in color.
Can anyone help in this regard?

Thank You

1 Like
2

Hi @simran

With Panel 1.x you can use a combination of css_classes and stylesheets as shown below.

validation-styling

The key point to notice is the css selector is :host(.validation-error) input.bk-input.

import panel as pn

pn.extension()

TEXT_INPUT_CSS = """
:host(.validation-error) input.bk-input {
    border-color: red;
}
"""

text_input = pn.widgets.TextInput(stylesheets=[TEXT_INPUT_CSS], name="Value")


@pn.depends(text_input, watch=True)
def validate(value):
    if value in ["", "valid"]:
        text_input.css_classes = []
        text_input.name = "Value"
    else:
        text_input.name = "Value (invalid)"
        text_input.css_classes = ["validation-error"]


pn.template.FastListTemplate(
    site="Panel", title="Indicating Validation Errors", main=[text_input], accent="orange"
).servable()

If this answer was useful please consider liking or resharing the Twitter or LinkedIn posts. Thanks.

1 Like
3

Hi @Marc ,
I tried your method but still no change in the border color.
Getting this : WARNING:param.: Setting non-parameter attribute stylesheets=[‘\n:host(.validation-error) input.bk-input {\n border-color: red;\n}\n’] using a mechanism intended only for parameters

4

I think you’re using an old panel version. Can you try and upgrade to 1.1.1?

5

Okay, I will upgrade and check.
Thank You.

1 Like