Bootstrap Snippet Color Picker using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
  <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>
     
      
      <input class="color-field" value="White" style="display:none;">
      
      <div class="dropdown">
              <a class="dropdown-toggle btn btn-default btn-color" data-toggle="dropdown" href="#"><span id="color-name">White</span></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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(function()
        {
$(".swatch swatch-clickable").click(function()
    {
    var colorName = $(this).attr('id');
    var colorHex  = $(this).css('background-color'));
     
    $(this).parents('.input-group-btn').find('.dropdown-toggle').html(selHTML+'<span class="caret"></span>');
   
    $(".btn-color").css('background-color', colorHex);
    
});
        });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Color Picker"
Bootstrap 3.0.0 Snippet by escapedlion

Related: See More

Questions / Comments:

"Color Picker" Bootstrap 3.0.0 Snippet by escapedlion

Related: See More

Questions / Comments:

"Color Picker"
Bootstrap 3.0.0 Snippet by escapedlion