topic Re: Alter colour of MapView border when focused in ArcGIS JavaScript Maps SDK Questions

Alter colour of MapView border when focused

Flookfinders — Thu, 14 Sep 2023 07:07:27 GMT

With version 4.27.6 of the API there is now a border displayed around the outside of the MapView. Presently this is black, but for the rest of my application we are using blue, so I am wondering how I can change the colour of this focus border to bring it line with the style used in the rest of our application? I cannot find any property that allows me to do this.

Re: Alter colour of MapView border when focused

JoelBennett — Thu, 14 Sep 2023 18:21:54 GMT

You will need to add something like this somewhere below the tag in which you import the css theme file:

Re: Alter colour of MapView border when focused

Flookfinders — Mon, 18 Sep 2023 07:43:50 GMT

I have tried adding the above code in various places within my application without any success. Would it make any difference that I am developing a React application?

Re: Alter colour of MapView border when focused

JoelBennett — Mon, 18 Sep 2023 17:15:21 GMT

It would definitely make a difference if a shadow DOM is involved, but I haven't worked with React to know if that's the case in your situation or not. There's more info on that kind of thing in this post.

Re: Alter colour of MapView border when focused

Martin_B — Tue, 03 Oct 2023 08:14:01 GMT

In React you can create a 'index.css' file and import it into your application's entrypoint like this:

import './index.css'

inside this file you can add the CSS provided by @JoelBennett.

.esri-view .esri-view-surface:focus::after { outline-color: #0000FF; }

Alternatively, you can link the CSS-file to your primary HTML-file like this:

<!doctype html> <html lang="en"> <head> ... <link href="path-to-your-index.css" rel="stylesheet" /> </head> <body> ... </body> </html>

whichever method you employ, you must ensure that the official Esri CSS file is imported into your project before you modify it with your own CSS.

Hope this helps! 🙂

Re: Alter colour of MapView border when focused

Flookfinders — Tue, 03 Oct 2023 08:23:27 GMT

That has sorted things for me, thanks

Re: Alter colour of MapView border when focused

4andy — Tue, 23 Dec 2025 16:56:12 GMT

This was working at API version 4.33 but at 4.34 it doesn't seem to be. I tried a few things but nothing seemed to work. Anyone have any ideas on how to change the color at 4.34 when using map components? Thanks.

Re: Alter colour of MapView border when focused

Sage_Wall — Tue, 23 Dec 2025 17:26:21 GMT

I think the focus color is controlled by the browser, but you should be able to overwrite it with something like this

arcgis-map:focus { border: 5px solid #FF0000; }

Re: Alter colour of MapView border when focused

4andy — Tue, 23 Dec 2025 18:32:18 GMT

That seems to add to it actually - I get both borders.

I can see the css outline colors and style and when I change it in the browser dev tools it changes the right thing but I can't seem to overwrite those properties in the css file itself and have them applied for some reason.

Re: Alter colour of MapView border when focused

Sage_Wall — Tue, 23 Dec 2025 19:42:19 GMT

yeah your right, my apologies. There might be something in the shadow-dom of the component. I'll ask around and see if I can get you an answer. I haven't been able to figure it out either. If I just add the :focus rule and then select the focus state in the dev tools it seems to work, but if I actually click on the map element I see the same thing you do with the interior blue border still present

Re: Alter colour of MapView border when focused

Sage_Wall — Tue, 23 Dec 2025 20:26:59 GMT

There may be a big here @4andy you should be able to do it with a css variable, but it's not working as intended for the map. It is working for other components inside the map however. Still looking into this but a lot of people are out for the holidays at this time.

https://codepen.io/sagewall/pen/wBWvdmQ?editors=1010

If you wanted to do everything

:root { --calcite-color-focus: #ff0000; }

A single component (isn't working for arcgis-map as far as I can tell):

arcgis-zoom { --calcite-color-focus: #ff0000; }

Sorry for the previous bad advice and hopefully we can get the bug fixed.

Re: Alter colour of MapView border when focused

4andy — Tue, 23 Dec 2025 20:31:56 GMT

Okay, thanks for looking into it @Sage_Wall.

Re: Alter colour of MapView border when focused

Sage_Wall — Mon, 05 Jan 2026 14:31:33 GMT

Hi @4andy ,

The devs created a new CSS Variable for the map component for the 5.0 release. You should be able to change the focus color on the map with it when 5.0 is released.

https://codepen.io/sagewall/pen/wBGppzG

arcgis-map { --arcgis-view-outline-color: #ff0000; }