"Multiple color picker"
Bootstrap 3.1.0 Snippet by escapedlion

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html> <head> <title>XML/XSLT Transform</title> <!-- Force IE to turn off past version compatibility mode and use current version mode --> <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1"> <!-- Get the width of the users display--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Text encoded as UTF-8 --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!-- bootstrap --> <link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <style> .container {margin-top: 25px;} .swatch { width:46px; height:46px; border-radius:5px; border: 1px solid #666; margin: 0px; } .outline-box { background-color: rgb(238, 238, 238); border: 1px solid rgb(204, 204, 204); border-radius: 4px; cursor: pointer; display: inline-block; height: 1.5em; margin-bottom: -6px; padding: 0px; width: 1.429em; } .dropdown-menu { border: 0; box-shadow: 0; padding: 0px; left: -270px; width: 315px; } .panel { border: 1px solid #111; } ul.list-inline li { padding:0; margin: 0; } .swatch-clickable:hover { border: 2px solid #111; cursor: pointer; } .fa { color: white; text-shadow: 1px 1px 0px black, 1px -1px 0px black, -1px 1px 0px black, -1px -1px 0px black; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="input-group"> <span class="input-group-btn"> <button type="button" class="btn btn-success btn-add">+</button> </span> <input type="text" name="color" class="form-control"> <div class="input-group-btn input-group-select"> <button type="button" class="btn btn-default dropdown-toggle" style="padding-top: 4px; padding-bottom: 4px" data-toggle="dropdown"> <span class="concept fa fa-square" id="preview" style="font-size: 18pt; display: inline-block; box-shadow: 1px;"></span> </button> <ul class="dropdown-menu color-menu"> <li> <div class="panel panel-default panel-color" id="preferences" style="margin:0px; left: -300px;"> <div class="panel-heading"> <span class="panel-label">Color</span> </div> <div class="panel-body"> <ul class="list-inline"> <li><div id="Red" class="swatch swatch-clickable" style="background-color:#d11600"></div></li> <li><div id="Orange" class="swatch swatch-clickable" style="background-color:#f96302"></div></li> <li><div id="Banana" class="swatch swatch-clickable" style="background-color:#ffed38"></div></li> <li><div id="Lemon" class="swatch swatch-clickable" style="background-color:#e5e111"></div></li> <li><div id="Lime" class="swatch swatch-clickable" style="background-color:#cee007"></div></li> <li><div id="Evergreen" class="swatch swatch-clickable" style="background-color:#339e35"></div></li> </ul> <ul class="list-inline"> <li><div id="Lunar Blue" class="swatch swatch-clickable" style="background-color:#60afdd"></div></li> <li><div id="Grape" class="swatch swatch-clickable" style="background-color:#9b4f96"></div></li> <li><div id="Hot Pink" class="swatch swatch-clickable" style="background-color:#fc0093"></div></li> <li><div id="Sagebrush" class="swatch swatch-clickable" style="background-color:#c6c699"></div></li> <li><div id="Tan" class="swatch swatch-clickable" style="background-color:tan"></div></li> <li><div id="White" class="swatch swatch-clickable" style="background-color:white"></div></li> </ul> </div> </div> </li> </ul> </div> </div> </div> </div> </div> </div> </body> </html>
$('.swatch-clickable').each(function () { $(this).attr('title', $(this).attr('id')); }); $('.swatch-clickable').tooltip(); $(".swatch-clickable").click(function() { $(".fa").css('color', $(this).css('background-color')); $("#color-field").val($(this).attr("id")) }); //@ sourceURL=pen.js

Related: See More

Vue Paper Dashboard
bootstrap 4 multiple carousel (3 Element by row)
Bootstrap 4 Carousel Multiple Slides
Fast Selection Date Picker

Questions / Comments: