Skip to Content (Press Enter)
UserImage.jpg
Jeff Kest
19Views
4Comments
Solved
Changing accessibility highlight color
Question
Reactive
Application Type
Reactive
Service Studio Version
11.54.64 (Build 63346)

I'm building a popup block to mimic the system popup question. Tis is so I can have yes/no buttons.

I want it to look exactly like the system's popup except for a header I'm adding. The only thing I cant get is the line around the selected / default button.  By default it's yellow.  I want it to be the same blue as the buttons, as the system's popup has.  I can't figure out where to change that in CSS.

System Popup:

My Popup:

0
0
03 Jul 2024
Copy Link
2024-06-01 07-14-16
Vaishali Thakur
Solution

hello @Jeff Kest , 

To change the outline color around the selected/default button in a popup to match the blue color of the buttons, 

you have to use this CSS in your class if you have inspected your popup and found the exact class name put there this -

modify the button's CSS for the focus state. 

.popup .btn:focus {  outline: 2px solid #007bff; /* Change this to your desired blue color */

                                    outline-offset: 2px; /* Optional: Adjust the outline offset if needed */ } 


I hope this helps you,

thanks 

See solution in context
0
0
03 Jul 2024
Copy Link
2025-07-28 06-45-20
Rupesh Patil

Hi @Jeff Kest,

The alert box is a system object, and not subject to CSS. Styling alert()-boxes is not possible. You could use a Popup widget. 

Refer this link:  

https://outsystemsui.outsystems.com/OutsystemsUiWebsite/PatternDetail?PatternId=526

Thanks.

0
0
03 Jul 2024
Copy Link
UserImage.jpg
Jeff Kest

I am using the popup widget with has-accessible-features. What I'm trying to do is change the default yellow highlight that comes with accessibility with a different color. 

0
0
03 Jul 2024
Copy Link
2025-07-28 06-45-20
Rupesh Patil

Replying to Jeff Kest's comment on 03 Jul 2024 04:42:00

hi @Jeff Kest 

Try this CSS:

.popup-dialog  .btn-primary{

  outline: 3px solid #0d50bb;

  outline-offset: 2px; 

}

Thanks

 

0
0
03 Jul 2024
Copy Link
2024-06-01 07-14-16
Vaishali Thakur
Solution

hello @Jeff Kest , 

To change the outline color around the selected/default button in a popup to match the blue color of the buttons, 

you have to use this CSS in your class if you have inspected your popup and found the exact class name put there this -

modify the button's CSS for the focus state. 

.popup .btn:focus {  outline: 2px solid #007bff; /* Change this to your desired blue color */

                                    outline-offset: 2px; /* Optional: Adjust the outline offset if needed */ } 


I hope this helps you,

thanks 

0
0
03 Jul 2024
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.