nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Alter colour of MapView border when focused

Flookfinders

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.

Find more posts tagged with

Accepted answers

Martin_B

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! 🙂

All comments

4andy

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.

Flookfinders

That has sorted things for me, thanks

Martin_B

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! 🙂

JoelBennett

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.

Flookfinders

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?

JoelBennett

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

<style type="text/css">
.esri-view .esri-view-surface:focus::after {
    outline-color: #0000FF;
}
</style>

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.