Turn off black focus/selection border/outline


I’m trying to get rid off the black outline you get when interacting with the babylon scene.
You don’t seem to get it in playgrounds. But I found it in one of your listed demos: sebodeweb motor show (towards the right side it seems to be overlayed by the UI).
Meanwhile in this demo it doesn’t seem to be there: Voxel Builder

So there might be some css you could do to get rid of it. I already have this (which doesn’t affect the black outline yet):

html, body {
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    border: none;

ping @msDestiny14 our CSS master

You know what’s interesting… I think the GUI Editor has similar since it’s constructing a Babylon scene inside the project.

Let me take a look and get back to you :slight_smile:

1 Like


Set “outline:none” to the canvas element itself. It should work

1 Like

That or setting the color to “transparent” which I see he did :thinking: .

Yes, but it needs to be set on the canvas element, not only on html n body.
So it is either using asterisk to target every element

* {

or target element by id, class, or tag


I thought for some reason targeting html/body might also style the renderCanvas, which it doesn’t. I’m still pretty new to css :smiley:
But you’re right. It was the outline of the renderCanvas.

1 Like