/*
* Very simple jQuery Color Picker
* https://github.com/tkrotoff/jquery-simplecolorpicker
*
* Copyright (C) 2012-2013 Tanguy Krotoff <tkrotoff@gmail.com>
*
* Licensed under the MIT license
*/
/**
* Inspired by Bootstrap Twitter.
* See https://github.com/twbs/bootstrap/blob/master/less/navbar.less
* See https://github.com/twbs/bootstrap/blob/master/less/dropdowns.less
*/
.simplecolorpicker.picker {
position: absolute;
top: 100%;
left: 0;
z-index: 1051; /* Above Bootstrap modal (@zindex-modal = 1050) */
display: none;
float: left;
min-width: 160px;
max-width: 283px; /* @popover-max-width = 276px + 7 */
padding: 5px 0 0 5px;
margin: 2px 0 0;
list-style: none;
background-color: #fff; /* @dropdown-bg */
border: 1px solid #ccc; /* @dropdown-fallback-border */
border: 1px solid rgba(0, 0, 0, .15); /* @dropdown-border */
-webkit-border-radius: 4px; /* @border-radius-base */
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
.simplecolorpicker.inline {
display: inline-block;
padding: 6px 0;
}
.simplecolorpicker span {
margin: 0 5px 5px 0;
}
.simplecolorpicker.icon,
.simplecolorpicker span.color {
display: inline-block;
cursor: pointer;
border: 1px solid transparent;
}
.simplecolorpicker.icon:after,
.simplecolorpicker span.color:after {
content: '\00a0\00a0\00a0\00a0'; /* Spaces */
}
.simplecolorpicker span.color[data-disabled]:hover {
cursor: not-allowed;
border: 1px solid transparent;
}
.simplecolorpicker span.color:hover,
.simplecolorpicker span.color[data-selected],
.simplecolorpicker span.color[data-selected]:hover {
border: 1px solid #222; /* @gray-dark */
}
.simplecolorpicker span.color[data-selected]:after {
color: #fff;
}
/* Vertical separator, replaces optgroup. */
.simplecolorpicker span.vr {
border-left: 1px solid #222; /* @gray-dark */
}
<!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>
/*
* Very simple jQuery Color Picker
* https://github.com/tkrotoff/jquery-simplecolorpicker
*
* Copyright (C) 2012-2013 Tanguy Krotoff <tkrotoff@gmail.com>
*
* Licensed under the MIT license
*/
(function($) {
'use strict';
/**
* Constructor.
*/
var SimpleColorPicker = function(select, options) {
this.init('simplecolorpicker', select, options);
};
/**
* SimpleColorPicker class.
*/
SimpleColorPicker.prototype = {
constructor: SimpleColorPicker,
init: function(type, select, options) {
var self = this;
self.type = type;
self.$select = $(select);
self.$select.hide();
self.options = $.extend({}, $.fn.simplecolorpicker.defaults, options);
self.$colorList = null;
if (self.options.picker === true) {
var selectText = self.$select.find('> option:selected').text();
self.$icon = $('<span class="simplecolorpicker icon"'
+ ' title="' + selectText + '"'
+ ' style="background-color: ' + self.$select.val() + ';"'
+ ' role="button" tabindex="0">'
+ '</span>').insertAfter(self.$select);
self.$icon.on('click.' + self.type, $.proxy(self.showPicker, self));
self.$picker = $('<span class="simplecolorpicker picker ' + self.options.theme + '"></span>').appendTo(document.body);
self.$colorList = self.$picker;
// Hide picker when clicking outside
$(document).on('mousedown.' + self.type, $.proxy(self.hidePicker, self));
self.$picker.on('mousedown.' + self.type, $.proxy(self.mousedown, self));
} else {
self.$inline = $('<span class="simplecolorpicker inline ' + self.options.theme + '"></span>').insertAfter(self.$select);
self.$colorList = self.$inline;
}
// Build the list of colors
// <span class="color selected" title="Green" style="background-color: #7bd148;" role="button"></span>
self.$select.find('> option').each(function() {
var $option = $(this);
var color = $option.val();
var isSelected = $option.is(':selected');
var isDisabled = $option.is(':disabled');
var selected = '';
if (isSelected === true) {
selected = ' data-selected';
}
var disabled = '';
if (isDisabled === true) {
disabled = ' data-disabled';
}
var title = '';
if (isDisabled === false) {
title = ' title="' + $option.text() + '"';
}
var role = '';
if (isDisabled === false) {
role = ' role="button" tabindex="0"';
}
var $colorSpan = $('<span class="color"'
+ title
+ ' style="background-color: ' + color + ';"'
+ ' data-color="' + color + '"'
+ selected
+ disabled
+ role + '>'
+ '</span>');
self.$colorList.append($colorSpan);
$colorSpan.on('click.' + self.type, $.proxy(self.colorSpanClicked, self));
var $next = $option.next();
if ($next.is('optgroup') === true) {
// Vertical break, like hr
self.$colorList.append('<span class="vr"></span>');
}
});
},
/**
* Changes the selected color.
*
* @param color the hexadecimal color to select, ex: '#fbd75b'
*/
selectColor: function(color) {
var self = this;
var $colorSpan = self.$colorList.find('> span.color').filter(function() {
return $(this).data('color').toLowerCase() === color.toLowerCase();
});
if ($colorSpan.length > 0) {
self.selectColorSpan($colorSpan);
} else {
console.error("The given color '" + color + "' could not be found");
}
},
showPicker: function() {
var pos = this.$icon.offset();
this.$picker.css({
// Remove some pixels to align the picker icon with the icons inside the dropdown
left: pos.left - 6,
top: pos.top + this.$icon.outerHeight()
});
this.$picker.show(this.options.pickerDelay);
},
hidePicker: function() {
this.$picker.hide(this.options.pickerDelay);
},
/**
* Selects the given span inside $colorList.
*
* The given span becomes the selected one.
* It also changes the HTML select value, this will emit the 'change' event.
*/
selectColorSpan: function($colorSpan) {
var color = $colorSpan.data('color');
var title = $colorSpan.prop('title');
// Mark this span as the selected one
$colorSpan.siblings().removeAttr('data-selected');
$colorSpan.attr('data-selected', '');
if (this.options.picker === true) {
this.$icon.css('background-color', color);
this.$icon.prop('title', title);
this.hidePicker();
}
// Change HTML select value
this.$select.val(color);
},
/**
* The user clicked on a color inside $colorList.
*/
colorSpanClicked: function(e) {
// When a color is clicked, make it the new selected one (unless disabled)
if ($(e.target).is('[data-disabled]') === false) {
this.selectColorSpan($(e.target));
this.$select.trigger('change');
}
},
/**
* Prevents the mousedown event from "eating" the click event.
*/
mousedown: function(e) {
e.stopPropagation();
e.preventDefault();
},
destroy: function() {
if (this.options.picker === true) {
this.$icon.off('.' + this.type);
this.$icon.remove();
$(document).off('.' + this.type);
}
this.$colorList.off('.' + this.type);
this.$colorList.remove();
this.$select.removeData(this.type);
this.$select.show();
}
};
/**
* Plugin definition.
* How to use: $('#id').simplecolorpicker()
*/
$.fn.simplecolorpicker = function(option) {
var args = $.makeArray(arguments);
args.shift();
// For HTML element passed to the plugin
return this.each(function() {
var $this = $(this),
data = $this.data('simplecolorpicker'),
options = typeof option === 'object' && option;
if (data === undefined) {
$this.data('simplecolorpicker', (data = new SimpleColorPicker(this, options)));
}
if (typeof option === 'string') {
data[option].apply(data, args);
}
});
};
/**
* Default options.
*/
$.fn.simplecolorpicker.defaults = {
// No theme by default
theme: '',
// Show the picker or make it inline
picker: false,
// Animation delay in milliseconds
pickerDelay: 0
};
})(jQuery);
.simplecolorpicker.fontawesome span.color[data-selected]:after {
font-family: 'FontAwesome';
-webkit-font-smoothing: antialiased;
content: '\f00c'; /* Ok/check mark */
margin-right: 1px;
margin-left: 1px;
}
.simplecolorpicker.glyphicons span.color[data-selected]:after {
/* Taken from glyphicon class. */
position: relative;
top: 1px;
font-family: 'Glyphicons Halflings';
line-height: .9;
-webkit-font-smoothing: antialiased;
content: '\e013'; /* Ok/check mark */
margin-right: 1px;
margin-left: 1px;
}
.simplecolorpicker.regularfont span.color[data-selected]:after {
content: '\2714'; /* Ok/check mark */
margin-right: 2.2px;
margin-left: 2.2px;
}