diff --git a/www/settings/app-settings.less b/www/settings/app-settings.less
index 0c21bfed0..185b22741 100644
--- a/www/settings/app-settings.less
+++ b/www/settings/app-settings.less
@@ -111,8 +111,14 @@
                 vertical-align: middle;
                 margin-right: 5px;
             }
-            input[type="color"] {
-                width: 100px;
+            .cp-settings-cursor-color-picker {
+                display: inline-block;
+                vertical-align: middle;
+                height: 25px;
+                width: 70px;
+                margin-right: 10px;
+                cursor: pointer;
+                border: 1px solid black;
             }
             .cp-settings-language-selector {
                 button.btn {
diff --git a/www/settings/inner.js b/www/settings/inner.js
index d785391d0..73b48f871 100644
--- a/www/settings/inner.js
+++ b/www/settings/inner.js
@@ -15,6 +15,7 @@ define([
     '/settings/make-backup.js',
     '/common/common-feedback.js',
 
+    '/common/jscolor.js',
     '/bower_components/file-saver/FileSaver.min.js',
     'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
     'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
@@ -1191,13 +1192,13 @@ define([
 
         var $inputBlock = $('<div>').appendTo($div);
 
+        var $colorPicker = $("<div>", { class: "cp-settings-cursor-color-picker"});
         var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
         var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
 
-        var $input = $('<input>', {
-            type: 'color',
-        }).on('change', function () {
-            var val = $input.val();
+        // when jscolor picker value change
+        var onchange = function (colorL) {
+            var val = "#" + colorL.toString();
             if (!/^#[0-9a-fA-F]{6}$/.test(val)) { return; }
             $spinner.show();
             $ok.hide();
@@ -1205,15 +1206,27 @@ define([
                 $spinner.hide();
                 $ok.show();
             });
-        }).appendTo($inputBlock);
+            $colorPicker.css('bakcground-color', val);
+        };
 
-        $ok.hide().appendTo($inputBlock);
-        $spinner.hide().appendTo($inputBlock);
+        // jscolor picker
+        var jscolorL = new window.jscolor($colorPicker[0],{showOnClick: false, onFineChange: onchange, valueElement:undefined});
+        $colorPicker.click(function () {
+            jscolorL.show();
+        });
 
+        // set default color
         common.getAttribute(['general', 'cursor', 'color'], function (e, val) {
             if (e) { return void console.error(e); }
-            $input.val(val || '');
+            val = val || "#000";
+            $colorPicker.css('bakcground-color', val);
+            jscolorL.fromString(val);
         });
+
+        $colorPicker.appendTo($inputBlock);
+        $ok.hide().appendTo($inputBlock);
+        $spinner.hide().appendTo($inputBlock);
+
         return $div;
     };