Remove blue outline on popup view with CSS

Hi,

We are opening a simple modal popup view in our perspective application, and the popup gets a blue outline (see figure).

The reason of the blue outline showing on the popup seems to be because it gets focus.
So, we tried adding :focus {outline:none !important;} in our css stylesheet to see if we could get rid of the blue outline. And adding that style to the root container of our popup. With no luck.
We tried giving focus to another component when opening the popup, which resulted in the outline disappearing, but keeps getting back when we click inside the popup.
The CSS method of getting rid of the blue outline on focus seems to work on "input" components like buttons etc., but not on our popup.

Any hints on what we are missing here? :face_with_monocle: :slight_smile:

Ignition Version 8.1.38

image

pop ups are a level above the root view, so you will need to create a custom style in the stylesheet

for all popups:

.ia_popup:focus {
  outline: none !important;
}

or if you still wish for it to only work with a certain style added to the view

.ia_popup:has( .psc-YOURSTYLE):focus {
  outline: none !important;
}
5 Likes

Works perfect, thanks! :slight_smile:

1 Like