topic Re: [arcgis js api 4.*] remove blue frame/outline around MapView in ArcGIS JavaScript Maps SDK Questions

[arcgis js api 4.*] remove blue frame/outline around MapView

DivisionSIG — Fri, 12 Jul 2019 14:24:53 GMT

Since javascript API vV4.* there is a blue outline around the map, when we interact with the view.

You can see this on the sample app https://developers.arcgis.com/javascript/latest/sample-code/intro-mapview/index.html Just move the map and you'll notice that blue outline around the view.

Do you know how to remove or disable that feature ?

thank you all

Re: [arcgis js api 4.*] remove blue frame/outline around MapView

RobertScheitlin__GISP — Sat, 11 Dec 2021 14:54:45 GMT

Focus rectangles are an important part of accessibility. But if you really want to remove it anyway.

.esri-view .esri-view-surface--inset-outline:focus::after {
  outline: none !important;
}‍‍‍

Re: [arcgis js api 4.*] remove blue frame/outline around MapView

DivisionSIG — Mon, 15 Jul 2019 08:41:28 GMT

thank you, it worked

Re: [arcgis js api 4.*] remove blue frame/outline around MapView

MiroslavUmlauf — Tue, 20 Jun 2023 10:00:53 GMT

Indeed it stopped working due to change of DOM inside view from version 4.26 to 4.27. Updated CSS adjusted by this change:

.esri-view .esri-view-surface--touch-none:focus::after { outline: none !important; }

Re: [arcgis js api 4.*] remove blue frame/outline around MapView

SebastianKrings — Wed, 13 May 2026 11:32:31 GMT

does not seem to work anymore in 5.x, any new idea?

Re: [arcgis js api 4.*] remove blue frame/outline around MapView

miro_aus — Wed, 13 May 2026 12:45:57 GMT

Adjusted for version 5.0.

.esri-view .esri-view-surface:focus::after, .esri-view .esri-view-surface:focus-visible::after { outline: none !important; }

Just a small accessibility note: while removing the focus outline may look better visually, it can make keyboard navigation less accessible. Keeping some subtle visible focus indicator is usually a better approach.

.esri-view .esri-view-surface:focus::after, .esri-view .esri-view-surface:focus-visible::after { outline: 2px solid rgba(255, 255, 255, 0.75); outline-offset: -4px; }

Re: [arcgis js api 4.*] remove blue frame/outline around MapView

Sage_Wall — Wed, 13 May 2026 14:16:53 GMT

If / when you migrate to use the arcgis-map component, we added a css variable to change the focus color. If you are not concerned about accessibility you could set it to be transparent

arcgis-map { --arcgis-view-color-focus: transparent; }

Re: [arcgis js api 4.*] remove blue frame/outline around MapView

SebastianKrings — Wed, 13 May 2026 15:18:24 GMT

Hi, thanks.
That does work.
Accessability is a thing, yes, but the permanent toggling of the Map-Frame, when doing different interactions with tools, was irritating pretty much.