How to change the style of Openlayers 3 zoom box?

Question

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

http://openlayers.org/en/latest/examples/box-selection.html

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):

<style>

.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;
}

</style>

... 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?

Answer 1

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

OR

2. 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'})

Answer 2

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.