I am very new to HTML, CSS, and JS.

I have added a scalebar to my map and figured out how to add a halo around the labels so they can be seen better against dark or light backgrounds, but I can't seem to replicate this on the line itself. Below is the sample I found online that i'm using for the labels.

.esriScalebarLabel, .esriScalebarLineLabel, .esriScalebarSecondNumber, .esriScalebarLabelDiv { text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; }

I have tried applying this same code (along with other CSS properties like box-shadow, outline, text-shadow) to the .esriScalebarLine selector but the closest I have gotten is a boarder around the lines container, and not the actual line itself.

My bar currently looks like this: enter image description here

And I need it to look more like this: enter image description here

Notice the 1px white outline surrounding the line? I need that! Any ideas on how to do that? Am I using the wrong selector?

  • 1
    Are you married to the line style? If you use the ruler style you can put a border around it. Aug 13, 2015 at 16:13

1 Answer 1


I couldn't figure it out, not sure if it is possible. You can get a white box the size of the whole scale bar area, which looks pretty silly. You can do this with by changing the .esriScalebarLine css to border-bottom-color: white; border-bottom-style: solid; border-bottom-width: 5px; Or you could add another div and change the background-color for the div to mask the whole area around the scale bar div.

Maybe you could duplicate the scale bar and make one thicker.

I also really don't think it is a big deal. I have never been concerned about the difficulty of reading a scale on a web map. MOST people won't even look at it and those that do will look closely or move the map to a more readable background if necessary.

If you have a dark styled map, you can change the css for the scalebar and make the whole thing white, by overriding the border css for .esriScalebarLine to border-color: white.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.