I try to change the color of the text inside the scaleline created with Openlayers via new ol.control.ScaleLine. To change the color I refer to the scaleline in my css sheet the following way:

.ol-scale-line {
position: absolute;
width: auto;
bottom: 0.25em;
left: 88%;
color: red;
background: black;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 2px;
border: 1.5px solid #703841ff;

Every other attribute I change works as expected, except the color. Any ideas?


Inside div with ol-scale-line class, scale control has another div with ol-scale-line-inner class. This class styles text and left, right and bottom border of scale.

Default values of this class are:

.ol-scale-line-inner {
  border: 1px solid #eee;
  border-top: none;
  color: #eee;
  font-size: 10px;
  text-align: center;
  margin: 1px;
  will-change: contents, width

So to change color of the scale text, you define style:

.ol-scale-line-inner {
  color: red;

Remark: It greatly helps if you know how to use browser debugger. Explanation above is result of inspecting scale control HTML element with browser debugger.

| improve this answer | |
  • Thanks, that did it and helped a lot! I started working with the browser debugger, but I will get further into it, thanks for your advice! – gHupf Aug 30 '19 at 19:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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