How do I change color of TextInput widget when using FastGridTemplate

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

Hi @simran

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


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

import panel as pn


: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 = [] = "Value"
    else: = "Value (invalid)"
        text_input.css_classes = ["validation-error"]

    site="Panel", title="Indicating Validation Errors", main=[text_input], accent="orange"

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

1 Like

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

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

Okay, I will upgrade and check.
Thank You.

1 Like