How to get rid of a widget's frame

[dmm9]

Question

In my custom widgets, I always get a blue border when I focus on any of them. This doesn't happen on Theia's predefined widgets. Do you know how I can get rid of the border?

[github-actions[bot]]

Hi @dmm9, thanks for starting this discussion! 👋

The Theia community will take a look soon. In the meantime, you might find helpful information in:

• 📖 Theia Documentation
• ❓ FAQ
• 💬 Previous Discussions

---

💙 Eclipse Theia is built and maintained by a community of contributors and sponsors. If Theia is valuable to your work, consider sponsoring the project. For professional support, training, or consulting services, learn more about available options.

[ndoschek]

Hi @dmm9,

The blue frame comes from Theia's global focus rule in packages/core/src/browser/style/index.css:

:focus:not(iframe) {
    outline: 1px solid var(--theia-focusBorder);
    outline-offset: -1px;
}

Most Theia widgets set tabIndex on their root node so the widget itself can take focus, which triggers that outline. Built-in widgets either override it (see for example packages/core/src/browser/style/split-widget.css) or delegate focus to an inner element with its own styling.
For your widget you could also just override via outline: none.
If the widget has focusable children (input, tree, etc.), it's usually nicer to keep the outline on those and only remove it from the outer container.

HTH!