     colorsContainer.append(createCustom())
 
     @input = picker.find('.small-colorpicker-custom')
+    @native = @input.prop("type") == "color"
+    @configureCustomPicker(picker)
+
+    colorsContainer.append("<div class='clearfix'></div>").end()
+
+  configureCustomPicker: (picker) ->
+    if @native
+      @configureNativeCustomPicker(picker)
+    else
+      @configureNonNativeCustomPicker(picker)
+
+    @input.on 'keydown', (event) =>
+      @closePicker() if event.which == 13
+
+  configureNativeCustomPicker: (picker) ->
+    @input.on 'change', (event) =>
+      hex = $(event.target).val()
+      @setHexColor(hex)
+      @triggerChange()
+    @input.on 'click', (event) =>
+      @picker.css("opacity", 0)
+
+  configureNonNativeCustomPicker: (picker) ->
     @input.minicolors
       theme: 'colorpicker'
       change: (hex) =>
         @setHexColor(hex)
-    @input.css
-      backgroundColor: initialColor
-      color: @fontFromColor(initialColor)
-    @input.on 'keydown', (event) =>
-      @closePicker() if event.which == 13
+
     picker.find('.minicolors-panel > div').each (_, div) ->
       $(div).css
         top: parseInt($(div).css('top')) + 3
         left: parseInt($(div).css('left')) + 3
-    colorsContainer.append("<div class='clearfix'></div>").end()
-   
+
   setHexColor: (hex) ->
     return unless /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(hex)
     unless @options.dontSetElementColor

    initialColor = "##{initialColor}" unless initialColor[0] == '#'

    createColorDiv = (color) ->
      el = $("<div class='small-colorpicker-color' data-color='#{color}' style='background-color:##{color};'></div>")
      el.addClass('small-colorpicker-color-white') if color.toLowerCase() == 'ffffff'
      el

    createCustom = () ->
      container = $("<div/>").addClass("small-colorpicker-custom-container")
      label = $("<div/>").text("Custom:").addClass("small-colorpicker-custom-label")
      input = $("<input/>")
        .val(initialColor)
        .addClass("small-colorpicker-custom")
      container.append(label)
      container.append(input)



  placePicker: () ->
    @picker.show()
    @picker.css('opacity', 1.0)
    preventScrolling() if window.preventScrolling
    elemRect = @element[0].getBoundingClientRect()
    css = {}
