<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Color picker for jQuery</title> <meta name="description" content="A very simple jQuery color picker plugin"> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.css"> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css"> <link rel="stylesheet" href="jquery.simplecolorpicker.css"> <link rel="stylesheet" href="jquery.simplecolorpicker-regularfont.css"> <link rel="stylesheet" href="jquery.simplecolorpicker-glyphicons.css"> <link rel="stylesheet" href="jquery.simplecolorpicker-fontawesome.css"> </head> <body style="padding: 15px;"> <!-- Button to init the jQuery plugin --> <button id="init" class="btn btn-primary">Init the jQuery plugin</button> <!-- Button to destroy the jQuery plugin --> <button id="destroy" class="btn btn-danger">Destroy the jQuery plugin</button> <br><br> <h3>Short list of colors</h3> colorpicker-shortlist: <select name="colorpicker-shortlist"> <option value="#7bd148">Green</option> <option value="#5484ed">Bold blue</option> <option value="#a4bdfc">Blue</option> <option value="#46d6db">Turquoise</option> <option value="#7ae7bf">Light green</option> <option value="#51b749">Bold green</option> <option value="#fbd75b">Yellow</option> <option value="#ffb878">Orange</option> <option value="#ff887c">Red</option> <option value="#dc2127">Bold red</option> <option value="#dbadff">Purple</option> <option value="#e1e1e1">Gray</option> </select> <h3>Long list of colors</h3> colorpicker-longlist: <select name="colorpicker-longlist"> <option value="#ac725e">#ac725e</option> <option value="#d06b64">#d06b64</option> <option value="#f83a22">#f83a22</option> <option value="#fa573c">#fa573c</option> <option value="#ff7537">#ff7537</option> <option value="#ffad46">#ffad46</option> <option value="#42d692">#42d692</option> <option value="#16a765">#16a765</option> <option value="#7bd148">#7bd148</option> <option value="#b3dc6c">#b3dc6c</option> <option value="#fbe983">#fbe983</option> <option value="#fad165">#fad165</option> <option value="#92e1c0">#92e1c0</option> <option value="#9fe1e7">#9fe1e7</option> <option value="#9fc6e7">#9fc6e7</option> <option value="#4986e7">#4986e7</option> <option value="#9a9cff">#9a9cff</option> <option value="#b99aff">#b99aff</option> <option value="#c2c2c2">#c2c2c2</option> <option value="#cabdbf">#cabdbf</option> <option value="#cca6ac">#cca6ac</option> <option value="#f691b2">#f691b2</option> <option value="#cd74e6">#cd74e6</option> <option value="#a47ae2">#a47ae2</option> </select> <h3>No theme</h3> colorpicker-notheme: <select name="colorpicker-notheme"> <option value="#7bd148">Green</option> <option value="#5484ed">Bold blue</option> <option value="#a4bdfc">Blue</option> <option value="#46d6db">Turquoise</option> <option value="#7ae7bf">Light green</option> <option value="#51b749">Bold green</option> <option value="#fbd75b">Yellow</option> <option value="#ffb878">Orange</option> <option value="#ff887c">Red</option> <option value="#dc2127">Bold red</option> <option value="#dbadff">Purple</option> <option value="#e1e1e1">Gray</option> </select> <h3>'regularfont' theme</h3> colorpicker-regularfont: <select name="colorpicker-regularfont"> <option value="#7bd148">Green</option> <option value="#5484ed">Bold blue</option> <option value="#a4bdfc">Blue</option> <option value="#46d6db">Turquoise</option> <option value="#7ae7bf">Light green</option> <option value="#51b749">Bold green</option> <option value="#fbd75b">Yellow</option> <option value="#ffb878">Orange</option> <option value="#ff887c">Red</option> <option value="#dc2127">Bold red</option> <option value="#dbadff">Purple</option> <option value="#e1e1e1">Gray</option> </select> <h3>'glyphicons' theme</h3> colorpicker-glyphicons: <select name="colorpicker-glyphicons"> <option value="#7bd148">Green</option> <option value="#5484ed">Bold blue</option> <option value="#a4bdfc">Blue</option> <option value="#46d6db">Turquoise</option> <option value="#7ae7bf">Light green</option> <option value="#51b749">Bold green</option> <option value="#fbd75b">Yellow</option> <option value="#ffb878">Orange</option> <option value="#ff887c">Red</option> <option value="#dc2127">Bold red</option> <option value="#dbadff">Purple</option> <option value="#e1e1e1">Gray</option> </select> <h3>'fontawesome' theme</h3> colorpicker-fontawesome: <select name="colorpicker-fontawesome"> <option value="#7bd148">Green</option> <option value="#5484ed">Bold blue</option> <option value="#a4bdfc">Blue</option> <option value="#46d6db">Turquoise</option> <option value="#7ae7bf">Light green</option> <option value="#51b749">Bold green</option> <option value="#fbd75b">Yellow</option> <option value="#ffb878">Orange</option> <option value="#ff887c">Red</option> <option value="#dc2127">Bold red</option> <option value="#dbadff">Purple</option> <option value="#e1e1e1">Gray</option> </select> <h3>Bootstrap 3 form</h3> <form class="form-horizontal"> <div class="form-group"> <label class="col-sm-4 control-label" for="input01">Text input</label> <div class="col-sm-6"> <input type="text" class="form-control" id="input01"> </div> </div> <div class="form-group"> <div class="col-sm-offset-4 col-sm-6"> <div class="checkbox"> <label> <input type="checkbox"> Option one </label> </div> </div> </div> <div class="form-group"> <label class="col-sm-4 control-label" for="colorpicker-bootstrap3-form">colorpicker-bootstrap3-form</label> <div class="col-sm-6"> <select name="colorpicker-bootstrap3-form" id="colorpicker-bootstrap3-form" class="form-control"> <option value="#7bd148">Green</option> <option value="#5484ed">Bold blue</option> <option value="#a4bdfc">Blue</option> <option value="#46d6db">Turquoise</option> <option value="#7ae7bf">Light green</option> <option value="#51b749">Bold green</option> <option value="#fbd75b">Yellow</option> <option value="#ffb878">Orange</option> <option value="#ff887c">Red</option> <option value="#dc2127">Bold red</option> <option value="#dbadff">Purple</option> <option value="#e1e1e1">Gray</option> </select> </div> </div> <div class="form-group"> <label class="col-sm-4 control-label" for="multiSelect">Multicon-select</label> <div class="col-sm-6"> <select multiple id="multiSelect" class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> </div> <div class="form-group"> <label class="col-sm-4 control-label" for="fileInput">File input</label> <div class="col-sm-6"> <input id="fileInput" type="file"> </div> </div> <div class="form-group"> <div class="col-sm-offset-4 col-sm-6"> <button type="submit" class="btn btn-primary">Save changes</button> <button class="btn btn-default">Cancel</button> </div> </div> </form> <h3>Bootstrap 3 modal window</h3> <a href="#myModal" class="btn btn-primary" data-toggle="modal">Launch demo modal</a> <div id="myModal" class="modal fade" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> colorpicker-modal-inline: <select name="colorpicker-modal-inline"> <option value="#7bd148">Green</option> <option value="#5484ed">Bold blue</option> <option value="#a4bdfc">Blue</option> <option value="#46d6db">Turquoise</option> <option value="#7ae7bf">Light green</option> <option value="#51b749">Bold green</option> <option value="#fbd75b">Yellow</option> <option value="#ffb878">Orange</option> <option value="#ff887c">Red</option> <option value="#dc2127">Bold red</option> <option value="#dbadff">Purple</option> <option value="#e1e1e1">Gray</option> </select> <br><br> colorpicker-modal-picker: <select name="colorpicker-modal-picker"> <option value="#7bd148">Green</option> <option value="#5484ed">Bold blue</option> <option value="#a4bdfc">Blue</option> <option value="#46d6db">Turquoise</option> <option value="#7ae7bf">Light green</option> <option value="#51b749">Bold green</option> <option value="#fbd75b">Yellow</option> <option value="#ffb878">Orange</option> <option value="#ff887c">Red</option> <option value="#dc2127">Bold red</option> <option value="#dbadff">Purple</option> <option value="#e1e1e1">Gray</option> </select> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal">Close</button> <button class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <h3>Option selected</h3> colorpicker-option-selected: <select name="colorpicker-option-selected"> <option value="#7bd148">Green</option> <option value="#5484ed">Bold blue</option> <option value="#a4bdfc" selected>Blue</option> <option value="#46d6db">Turquoise</option> <option value="#7ae7bf">Light green</option> <option value="#51b749">Bold green</option> <option value="#fbd75b">Yellow</option> <option value="#ffb878">Orange</option> <option value="#ff887c" selected>Red</option> <option value="#dc2127">Bold red</option> <option value="#dbadff">Purple</option> <option value="#e1e1e1">Gray</option> </select> <h3>Options disabled</h3> colorpicker-options-disabled: <select name="colorpicker-options-disabled"> <option value="#7bd148">Green</option> <option value="#5484ed">Bold blue</option> <option value="#a4bdfc" disabled>Blue</option> <option value="#46d6db">Turquoise</option> <option value="#7ae7bf">Light green</option> <option value="#51b749">Bold green</option> <option value="#fbd75b">Yellow</option> <option value="#ffb878">Orange</option> <option value="#ff887c" disabled>Red</option> <option value="#dc2127">Bold red</option> <option value="#dbadff">Purple</option> <option value="#e1e1e1">Gray</option> </select> <h3>Option selected and disabled at the same time</h3> colorpicker-option-selected-disabled: <select name="colorpicker-option-selected-disabled"> <option value="#7bd148">Green</option> <option value="#5484ed">Bold blue</option> <option value="#a4bdfc" selected disabled>Blue</option> <option value="#46d6db">Turquoise</option> <option value="#7ae7bf">Light green</option> <option value="#51b749">Bold green</option> <option value="#fbd75b">Yellow</option> <option value="#ffb878">Orange</option> <option value="#ff887c" selected disabled>Red</option> <option value="#dc2127">Bold red</option> <option value="#dbadff">Purple</option> <option value="#e1e1e1">Gray</option> </select> <h3>Optgroups</h3> colorpicker-optgroups: <select name="colorpicker-optgroups"> <option value="#7bd148">Green</option> <option value="#5484ed">Bold blue</option> <optgroup label="----------"></optgroup> <option value="#a4bdfc">Blue</option> <option value="#46d6db">Turquoise</option> <option value="#7ae7bf">Light green</option> <option value="#51b749">Bold green</option> <option value="#fbd75b">Yellow</option> <option value="#ffb878">Orange</option> <option value="#ff887c">Red</option> <option value="#dc2127">Bold red</option> <optgroup label="----------"></optgroup> <option value="#dbadff">Purple</option> <option value="#e1e1e1">Gray</option> </select> <h3>Change background color</h3> colorpicker-change-background-color: <select name="colorpicker-change-background-color"> <option value="#7bd148">Green</option> <option value="#5484ed">Bold blue</option> <option value="#a4bdfc">Blue</option> <option value="#46d6db">Turquoise</option> <option value="#7ae7bf">Light green</option> <option value="#51b749">Bold green</option> <option value="#fbd75b">Yellow</option> <option value="#ffb878">Orange</option> <option value="#ff887c">Red</option> <option value="#dc2127">Bold red</option> <option value="#dbadff">Purple</option> <option value="#e1e1e1">Gray</option> </select> <h3>selectColor('#fbd75b') after 5 seconds</h3> colorpicker-selectColor-#fbd75b: <select name="colorpicker-selectColor-#fbd75b"> <option value="#7bd148">Green</option> <option value="#5484ed">Bold blue</option> <option value="#a4bdfc">Blue</option> <option value="#46d6db">Turquoise</option> <option value="#7ae7bf">Light green</option> <option value="#51b749">Bold green</option> <option value="#fbd75b">Yellow</option> <option value="#ffb878">Orange</option> <option value="#ff887c">Red</option> <option value="#dc2127">Bold red</option> <option value="#dbadff">Purple</option> <option value="#e1e1e1">Gray</option> </select> <h3>selectColor('#FBD75B') after 5 seconds</h3> colorpicker-selectColor-#FBD75B: <select name="colorpicker-selectColor-#FBD75B"> <option value="#7bd148">Green</option> <option value="#5484ed">Bold blue</option> <option value="#a4bdfc">Blue</option> <option value="#46d6db">Turquoise</option> <option value="#7ae7bf">Light green</option> <option value="#51b749">Bold green</option> <option value="#fbd75b">Yellow</option> <option value="#ffb878">Orange</option> <option value="#ff887c">Red</option> <option value="#dc2127">Bold red</option> <option value="#dbadff">Purple</option> <option value="#e1e1e1">Gray</option> </select> <h3>Multiple selectColor('#fbd75b') after 5 seconds</h3> colorpicker-selectColor-#fbd75b-multiple: <select name="colorpicker-selectColor-#fbd75b-multiple" style="display: none;"> <option value="#7bd148">Green</option> <option value="#5484ed">Bold blue</option> <option value="#a4bdfc">Blue</option> <option value="#46d6db">Turquoise</option> <option value="#7ae7bf">Light green</option> <option value="#51b749">Bold green</option> <option value="#fbd75b">Yellow</option> <option value="#fbd75b">Yellow</option> <option value="#fbd75b">Yellow</option> <option value="#ffb878">Orange</option> <option value="#ff887c">Red</option> <option value="#dc2127">Bold red</option> <option value="#dbadff">Purple</option> <option value="#e1e1e1">Gray</option> </select> <h3>selectColor('unknown') after 5 seconds</h3> colorpicker-selectColor-unknown: <select name="colorpicker-selectColor-unknown"> <option value="#7bd148">Green</option> <option value="#5484ed">Bold blue</option> <option value="#a4bdfc">Blue</option> <option value="#46d6db">Turquoise</option> <option value="#7ae7bf">Light green</option> <option value="#51b749">Bold green</option> <option value="#fbd75b">Yellow</option> <option value="#ffb878">Orange</option> <option value="#ff887c">Red</option> <option value="#dc2127">Bold red</option> <option value="#dbadff">Purple</option> <option value="#e1e1e1">Gray</option> </select> <h3>Picker short list</h3> colorpicker-picker-shortlist: <select name="colorpicker-picker-longlist"> <option value="#7bd148">Green</option> <option value="#5484ed">Bold blue</option> <option value="#a4bdfc">Blue</option> <option value="#46d6db">Turquoise</option> <option value="#7ae7bf">Light green</option> <option value="#51b749">Bold green</option> <option value="#fbd75b">Yellow</option> <option value="#ffb878">Orange</option> <option value="#ff887c">Red</option> <option value="#dc2127">Bold red</option> <option value="#dbadff">Purple</option> <option value="#e1e1e1">Gray</option> </select> <h3>Picker long list</h3> colorpicker-picker-longlist: <select name="colorpicker-picker-longlist"> <option value="#ac725e">#ac725e</option> <option value="#d06b64">#d06b64</option> <option value="#f83a22">#f83a22</option> <option value="#fa573c">#fa573c</option> <option value="#ff7537">#ff7537</option> <option value="#ffad46">#ffad46</option> <option value="#42d692">#42d692</option> <option value="#16a765">#16a765</option> <option value="#7bd148">#7bd148</option> <option value="#b3dc6c">#b3dc6c</option> <option value="#fbe983">#fbe983</option> <option value="#fad165">#fad165</option> <option value="#92e1c0">#92e1c0</option> <option value="#9fe1e7">#9fe1e7</option> <option value="#9fc6e7">#9fc6e7</option> <option value="#4986e7">#4986e7</option> <option value="#9a9cff">#9a9cff</option> <option value="#b99aff">#b99aff</option> <option value="#c2c2c2">#c2c2c2</option> <option value="#cabdbf">#cabdbf</option> <option value="#cca6ac">#cca6ac</option> <option value="#f691b2">#f691b2</option> <option value="#cd74e6">#cd74e6</option> <option value="#a47ae2">#a47ae2</option> </select> <h3>Picker with 1s animation delay</h3> colorpicker-picker-delay: <select name="colorpicker-picker-delay"> <option value="#7bd148">Green</option> <option value="#5484ed">Bold blue</option> <option value="#a4bdfc">Blue</option> <option value="#46d6db">Turquoise</option> <option value="#7ae7bf">Light green</option> <option value="#51b749">Bold green</option> <option value="#fbd75b">Yellow</option> <option value="#ffb878">Orange</option> <option value="#ff887c">Red</option> <option value="#dc2127">Bold red</option> <option value="#dbadff">Purple</option> <option value="#e1e1e1">Gray</option> </select> <h3>Picker with option selected</h3> colorpicker-picker-option-selected: <select name="colorpicker-picker-option-selected"> <option value="#7bd148">Green</option> <option value="#5484ed">Bold blue</option> <option value="#a4bdfc" selected>Blue</option> <option value="#46d6db">Turquoise</option> <option value="#7ae7bf">Light green</option> <option value="#51b749">Bold green</option> <option value="#fbd75b">Yellow</option> <option value="#ffb878">Orange</option> <option value="#ff887c" selected>Red</option> <option value="#dc2127">Bold red</option> <option value="#dbadff">Purple</option> <option value="#e1e1e1">Gray</option> </select> <h3>Picker with options disabled</h3> colorpicker-picker-options-disabled: <select name="colorpicker-picker-options-disabled"> <option value="#7bd148">Green</option> <option value="#5484ed">Bold blue</option> <option value="#a4bdfc" disabled>Blue</option> <option value="#46d6db">Turquoise</option> <option value="#7ae7bf">Light green</option> <option value="#51b749">Bold green</option> <option value="#fbd75b">Yellow</option> <option value="#ffb878">Orange</option> <option value="#ff887c" disabled>Red</option> <option value="#dc2127">Bold red</option> <option value="#dbadff">Purple</option> <option value="#e1e1e1">Gray</option> </select> <h3>Picker with option selected and disabled at the same time</h3> colorpicker-picker-option-selected-disabled: <select name="colorpicker-picker-option-selected-disabled"> <option value="#7bd148">Green</option> <option value="#5484ed">Bold blue</option> <option value="#a4bdfc" selected disabled>Blue</option> <option value="#46d6db">Turquoise</option> <option value="#7ae7bf">Light green</option> <option value="#51b749">Bold green</option> <option value="#fbd75b">Yellow</option> <option value="#ffb878">Orange</option> <option value="#ff887c" selected disabled>Red</option> <option value="#dc2127">Bold red</option> <option value="#dbadff">Purple</option> <option value="#e1e1e1">Gray</option> </select> <h3>Picker with Optgroups</h3> colorpicker-picker-optgroups: <select name="colorpicker-picker-optgroups"> <option value="#7bd148">Green</option> <option value="#5484ed">Bold blue</option> <optgroup label="----------"></optgroup> <option value="#a4bdfc">Blue</option> <option value="#46d6db">Turquoise</option> <option value="#7ae7bf">Light green</option> <option value="#51b749">Bold green</option> <option value="#fbd75b">Yellow</option> <option value="#ffb878">Orange</option> <option value="#ff887c">Red</option> <option value="#dc2127">Bold red</option> <optgroup label="----------"></optgroup> <option value="#dbadff">Purple</option> <option value="#e1e1e1">Gray</option> </select> <h3>Picker with selectColor('#fbd75b') after 5 seconds</h3> colorpicker-picker-selectColor-#fbd75b: <select name="colorpicker-picker-selectColor-#fbd75b"> <option value="#7bd148">Green</option> <option value="#5484ed">Bold blue</option> <option value="#a4bdfc">Blue</option> <option value="#46d6db">Turquoise</option> <option value="#7ae7bf">Light green</option> <option value="#51b749">Bold green</option> <option value="#fbd75b">Yellow</option> <option value="#ffb878">Orange</option> <option value="#ff887c">Red</option> <option value="#dc2127">Bold red</option> <option value="#dbadff">Purple</option> <option value="#e1e1e1">Gray</option> </select> <h3>Picker with selectColor('unknown') after 5 seconds</h3> colorpicker-picker-selectColor-unknown: <select name="colorpicker-picker-selectColor-unknown"> <option value="#7bd148">Green</option> <option value="#5484ed">Bold blue</option> <option value="#a4bdfc">Blue</option> <option value="#46d6db">Turquoise</option> <option value="#7ae7bf">Light green</option> <option value="#51b749">Bold green</option> <option value="#fbd75b">Yellow</option> <option value="#ffb878">Orange</option> <option value="#ff887c">Red</option> <option value="#dc2127">Bold red</option> <option value="#dbadff">Purple</option> <option value="#e1e1e1">Gray</option> </select> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.js"></script> <script src="jquery.simplecolorpicker.js"></script> <script> $(document).ready(function() { $('select[name="colorpicker-change-background-color"]').on('change', function() { $(document.body).css('background-color', $('select[name="colorpicker-change-background-color"]').val()); }); setTimeout(function() { $('select[name="colorpicker-selectColor-#fbd75b"]').simplecolorpicker('selectColor', '#fbd75b'); }, 5000); setTimeout(function() { $('select[name="colorpicker-selectColor-#FBD75B"]').simplecolorpicker('selectColor', '#FBD75B'); }, 5000); setTimeout(function() { $('select[name="colorpicker-selectColor-#fbd75b-multiple"]').simplecolorpicker('selectColor', '#fbd75b'); }, 5000); setTimeout(function() { // Generates a JavaScript error $('select[name="colorpicker-selectColor-unknown"]').simplecolorpicker('selectColor', 'unknown'); }, 5000); setTimeout(function() { $('select[name="colorpicker-picker-selectColor-#fbd75b"]').simplecolorpicker('selectColor', '#fbd75b'); }, 5000); setTimeout(function() { // Generates a JavaScript error $('select[name="colorpicker-picker-selectColor-unknown"]').simplecolorpicker('selectColor', 'unknown'); }, 5000); $('#init').on('click', function() { $('select[name="colorpicker-shortlist"]').simplecolorpicker(); $('select[name="colorpicker-longlist"]').simplecolorpicker(); $('select[name="colorpicker-notheme"]').simplecolorpicker(); $('select[name="colorpicker-regularfont"]').simplecolorpicker({theme: 'regularfont'}); $('select[name="colorpicker-glyphicons"]').simplecolorpicker({theme: 'glyphicons'}); $('select[name="colorpicker-fontawesome"]').simplecolorpicker({theme: 'fontawesome'}); $('select[name="colorpicker-bootstrap3-form"]').simplecolorpicker({theme: 'glyphicons'}); $('select[name="colorpicker-modal-inline"]').simplecolorpicker(); $('select[name="colorpicker-modal-picker"]').simplecolorpicker({picker: true}); $('select[name="colorpicker-option-selected"]').simplecolorpicker({theme: 'glyphicons'}); $('select[name="colorpicker-options-disabled"]').simplecolorpicker({theme: 'glyphicons'}); $('select[name="colorpicker-option-selected-disabled"]').simplecolorpicker({theme: 'glyphicons'}); $('select[name="colorpicker-optgroups"]').simplecolorpicker(); $('select[name="colorpicker-change-background-color"]').simplecolorpicker(); $('select[name="colorpicker-selectColor-#fbd75b"]').simplecolorpicker({theme: 'glyphicons'}); $('select[name="colorpicker-selectColor-#FBD75B"]').simplecolorpicker({theme: 'glyphicons'}); $('select[name="colorpicker-selectColor-#fbd75b-multiple"]').simplecolorpicker({theme: 'glyphicons'}); $('select[name="colorpicker-selectColor-unknown"]').simplecolorpicker({theme: 'glyphicons'}); $('select[name="colorpicker-picker-shortlist"]').simplecolorpicker({picker: true, theme: 'glyphicons'}); $('select[name="colorpicker-picker-longlist"]').simplecolorpicker({picker: true, theme: 'glyphicons'}); $('select[name="colorpicker-picker-delay"]').simplecolorpicker({picker: true, theme: 'glyphicons', pickerDelay: 1000}); $('select[name="colorpicker-picker-option-selected"]').simplecolorpicker({picker: true, theme: 'glyphicons'}); $('select[name="colorpicker-picker-options-disabled"]').simplecolorpicker({picker: true, theme: 'glyphicons'}); $('select[name="colorpicker-picker-option-selected-disabled"]').simplecolorpicker({picker: true, theme: 'glyphicons'}); $('select[name="colorpicker-picker-optgroups"]').simplecolorpicker({picker: true, theme: 'glyphicons'}); $('select[name="colorpicker-picker-selectColor-#fbd75b"]').simplecolorpicker({picker: true, theme: 'glyphicons'}); $('select[name="colorpicker-picker-selectColor-unknown"]').simplecolorpicker({picker: true, theme: 'glyphicons'}); }); $('#destroy').on('click', function() { $('select').simplecolorpicker('destroy'); }); // By default, activate simplecolorpicker plugin on HTML selects $('#init').trigger('click'); }); </script> </body> </html>