Border color changing for Autocomplete widget in CSS.

[AP_10343008]

I want to highlight autocomplete widget border colour based on few conditions. 
ex: 
if(cond==true) Output="";
else Output="ui-autocomplete-input";

css code:

.ui-autocomplete-input { border: 1px solid red !important; }

This css code showing border in red for both true and false conditions. 

What is the correct code??

[TL_9220870]

I don't think much of CSS in TWX. In my experience, it often reacts as it wants.
I use the shape widget to create and color ramen.
I always put this in the background of my objects so that only a frame can be seen from this shape.
I then pass on my status and determine what it should look like in the state formatting and the provided state definition.

hope something could help.

[AP_10343008]

I covered autocomplete widget with rectangular shape. I passed below css to shape based on condition. 
The css is working. But user couldnt use autocomplete widget as it is covered with shape widget. 

i tried the same method using transparent button. It is just covering autocomplete widget and making it non - usable.

[TL_9220870]

Emphasize again, build my frames with shapes that I put in the background.

Unfortunately I don't know the Autocpmplete widget, but if you like the effect of the button solution. Maybe put the button in the background so that it easily extends over the autocomplete widget, and when working with the autocomplete widget you use its events to trigger the trigger click event of the button, then it is pressed in the background.

[AP_10343008 · Accepted solution]

This css worked for autocomplete. 
.custom-border {
border-color: red; /* Change this to your desired color */
border-width: 2px; /* Adjust the border width if needed */
border-style: solid; /* You can change this to dashed, dotted, etc. */
}