     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


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

    enableScrolling() if window.enableScrolling
    $(window).off 'click', @clickClosePicker

    @triggerChange()
    @picker.hide() if @picker

  triggerChange: () ->
    if @hexColor && @color
      @element.trigger(
        type: 'changeColor'
        color: {hex: @hexColor, converted: @color}
      )

  createColorPicker: () ->
    picker = $(@template).appendTo("body")
