Use DOM instead of map canvas for ol.render.Box

src/ol/interaction/dragzoominteraction.js

@@ -6,8 +6,6 @@ goog.require('ol.easing');
 goog.require('ol.events.condition');
 goog.require('ol.extent');
 goog.require('ol.interaction.DragBox');
-goog.require('ol.style.Stroke');
-goog.require('ol.style.Style');
 
 
 
@@ -17,6 +15,9 @@ goog.require('ol.style.Style');
  * normally combined with an {@link ol.events.condition} that limits
  * it to when a key, shift by default, is held down.
  *
+ * To change the style of the box, use CSS and the `.ol-dragzoom` selector, or
+ * your custom one configured with `className`.
+ *
  * @constructor
  * @extends {ol.interaction.DragBox}
  * @param {olx.interaction.DragZoomOptions=} opt_options Options.
@@ -34,20 +35,9 @@ ol.interaction.DragZoom = function(opt_options) {
    */
   this.duration_ = options.duration !== undefined ? options.duration : 200;
 
-  /**
-   * @private
-   * @type {ol.style.Style}
-   */
-  var style = options.style ?
-      options.style : new ol.style.Style({
-        stroke: new ol.style.Stroke({
-          color: [0, 0, 255, 1]
-        })
-      });
-
   goog.base(this, {
     condition: condition,
-    style: style
+    className: options.className || 'ol-dragzoom'
   });
 
 };