I want to zoom to an area selected by drawing a box on the map following this example:


Working fine. Now I want to change the line color and background of the box. Some examples have this code (edited to show all my working CSS changes but ol-dragbox):


.ol-overviewmap {
    bottom: 30px !important;

.ol-control button {
    font-size : 18px;

.ol-zoomslider {
    top : 5.5em;

.ol-dragbox {
    background-color: rgba(255,255,255,0.4);
    border-color: rgba(100,150,0,1);

.ol-scale-line {
    background: rgba(0, 60, 136, 0.5);
    padding: 2px;


... it is changing all classes but not ol-dragbox.

I'm curious because in this example I can't see anything adding this kind of behaviour ( zoom to box ) and nor in my map even it is working well:

My map:

map = new ol.Map({
    layers: [ landLayer, routesLayer ],
    target: 'map',
    renderer: 'canvas',
    loadTilesWhileAnimating: true,
    loadTilesWhileInteracting: true,        
    controls: ol.control.defaults().extend([
       new ol.control.ScaleLine(),
       new ol.control.ZoomSlider(),
       new ol.control.MousePosition({
           undefinedHTML: '',
           projection: 'EPSG:4326',
           coordinateFormat: function(coordinate) {
               return ol.coordinate.format(coordinate, '{y}, {x}', 4);

    view: theView

I not added any control or interaction to create this zoom-to-box feature. Inspecting the OpenLayers CSS file ( v3.15 ) I can't find any style to .ol-dragbox. Where this blue box came from and how can I change it?

2 Answers 2


Ok now I realised your problem. You want to change the default ol.interaction.DragZoom interaction. To do so you have two options.

  1. overwrite the ol-dragzoom classname and not the ol-dragbox


  1. Disable the default interaction during map init like so

    var map = new ol.Map({
    controls : ol.control.defaults()
                .extend([ new ol.control.FullScreen() ]),
    interactions : ol.interaction.defaults({shiftDragZoom:false}),.....

and then create a new interaction asigning your css class style, like so

 var dragZoomInt = new ol.interaction.DragZoom({className:'mybox'})
  • Nice.. thanks. What was happened with the simple way?
    – Magno C
    Jul 18, 2016 at 15:13
  • Huh.. DragZoom is what I realy want. I don't know whay my map is having this default behaviour because I dont tell it to zoom when drag a box. So why must I disable what I want (DragZoom) to enable the DragBox and write code to make a DragZoom using it ? Why not just use the DragZoom with no code and override the CSS class? And... where in your fiddle you're zooming?
    – Magno C
    Jul 18, 2016 at 15:19
  • The code in this answer worked nice (using option two. Not tried the easiest ). Will not consider the fiddle in your comment from @csd answer
    – Magno C
    Jul 18, 2016 at 15:36
  • 1
    cosider the fiddle just to see the css class. Glad to help amigo!!!!
    – pavlos
    Jul 19, 2016 at 7:25

It's not clear from your post why you are unable to change the style of the box. It should be enough to change the style of ol-dragbox.

But here are some details to explain where the blue box comes from:

The CSS style name for the box is set by JavaScript code. In dragboxinteraction.js:

this.box_ = new ol.render.Box(options.className || 'ol-dragbox');

If you do not specify the className option when you create your ol.interaction.DragBox, then it will default to ol-dragbox.

OpenLayers does not provide any default style for ol-dragbox. That's why you couldn't find it by searching its CSS.

The blue border comes from the fact that the box's div also has the ol-box style. And the OpenLayers CSS includes border: 2px solid #00f as the default for ol-box.

  • I don't have dragboxinteraction.js ... just openlayers3.15.js. How can I get it and why it not came with the OL package I've downloaded?
    – Magno C
    Jul 16, 2016 at 17:54
  • In same part of code I'm trying to change the ol-dragboxstyle I can change the style for ol-control button with success. Will edit my post to reflect all CSS changes I've made.
    – Magno C
    Jul 16, 2016 at 17:56
  • 1
    check this fiddle-->jsfiddle.net/p_tsagkis/stL1xcvy use the cntrl key during drag to activate the draw box interaction and see the box style.
    – pavlos
    Jul 16, 2016 at 18:07

Your Answer

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

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