Skip to main content
A
AP_1034300816-Pearl
16-Pearl
February 5, 2025
Solved

Border color changing for Autocomplete widget in CSS.

  • February 5, 2025
  • 1 reply
  • 956 views

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??

 

 

 

Best answer by AP_10343008

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. */
}

1 reply

T
TL_922087012-Amethyst
12-Amethyst
February 5, 2025

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.


A
AP_1034300816-PearlAuthor
16-Pearl
February 11, 2025

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.

T
TL_922087012-Amethyst
12-Amethyst
February 11, 2025

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.

Terms & ConditionsCookie settingsAccessibility statement