Simple bs color picker.
Forked from betul's Pen Bootstrap Swatch Picker.
A Pen by Anonasaurus Rex on CodePen.
Simple bs color picker.
Forked from betul's Pen Bootstrap Swatch Picker.
A Pen by Anonasaurus Rex on CodePen.
<div class="container"> | |
<h1>Pick a Color</h1> | |
<table> | |
<tr> | |
<td style="padding-right:5px;"> | |
<div id="preview" class="swatch" style="background-color:#fff" ></div> | |
</td> | |
<td> | |
<span id="color-name">White</span><br> | |
<input id="color-field" value="White" style="display:none;"> | |
<div class="dropdown"> | |
<a class="dropdown-toggle btn btn-default" data-toggle="dropdown" href="#" style="color:#000;">Change Color</a> | |
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> | |
<table> | |
<tr> | |
<td><div id="Red" class="swatch swatch-clickable" style="background-color:#d11600"></div></td> | |
<td><div id="Orange" class="swatch swatch-clickable" style="background-color:#f96302"></div></td> | |
<td><div id="Banana" class="swatch swatch-clickable" style="background-color:#ffed38"></div></td> | |
<td><div id="Lemon" class="swatch swatch-clickable" style="background-color:#e5e111"></div></td> | |
<td><div id="Lime" class="swatch swatch-clickable" style="background-color:#cee007"></div></td> | |
<td><div id="Evergreen" class="swatch swatch-clickable" style="background-color:#339e35"></div></td> | |
</tr><tr> | |
<td><div id="Lunar Blue" class="swatch swatch-clickable" style="background-color:#60afdd"></div></td> | |
<td><div id="Grape" class="swatch swatch-clickable" style="background-color:#9b4f96"></div></td> | |
<td><div id="Hot Pink" class="swatch swatch-clickable" style="background-color:#fc0093"></div></td> | |
<td><div id="Sagebrush" class="swatch swatch-clickable" style="background-color:#c6c699"></div></td> | |
<td><div id="Tan" class="swatch swatch-clickable" style="background-color:tan"></div></td> | |
<td><div id="White" class="swatch swatch-clickable" style="background-color:white"></div></td> | |
</tr> | |
</table> | |
</table> | |
</ul> | |
</div> | |
</td> | |
</table> | |
</div> | |
// Bootstrap swatch picker | |
// Alex Standke | |
// 1 October 2013 | |
// License: MIT | |
$('.swatch-clickable').each(function () { | |
$(this).attr('title', $(this).attr('id')); | |
}); | |
$('.swatch-clickable').tooltip(); | |
$(".swatch-clickable").click(function() { | |
$("#preview").css('background-color', $(this).css('background-color')); | |
$("#color-name").html($(this).attr("id")); | |
$("#color-field").val($(this).attr("id")) | |
}); |
.container { | |
padding-top:50px; | |
} | |
.swatch { | |
width:70px; | |
height:70px; | |
border-radius:5px; | |
border: 2px solid #666; | |
} | |
.swatch-clickable:hover { | |
border: 2px solid #000; | |
cursor: pointer; | |
} | |
.dropdown-menu { | |
padding:10px; | |
} |