"color picker"
Bootstrap 3.3.0 Snippet by ASDAFF

Post to Facebook Tweet this

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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">
<div class="row">
<div class='col-md-6'>
<div class="form-group">
<label for="" class="">Select Colour</label>
<div class="dropdown">
<button class="btn _select_color dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Green<span class="caret _right"></span>
<span _text_display="Green" class="color green"></span></button>
<ul class="dropdown-menu _select_color_drop" aria-labelledby="dropdownMenu1">
<li><span _text_display="Green" class="color green"></span></li>
<li><span _text_display="Red" class="color red"></span></li>
<li><span _text_display="Yellow" class="color yellow"></span></li>
<li><span _text_display="Brown" class="color brown"></span></li>
<li><span _text_display="Orange" class="color orange"></span></li>
<li><span _text_display="Pink" class="color pink"></span></li>
<li><span _text_display="Silver" class="color silver"></span></li>
<li><span _text_display="Bule" class="color blue"></span></li>
<li><span _text_display="TEAL" class="color TEAL"></span></li>
<li><span _text_display="NAVY" class="color NAVY"></span></li>
<li><span _text_display="PURPLE" class="color PURPLE"></span></li>
<li><span _text_display="OLIVE" class="color OLIVE"></span></li>
<li><span _text_display="LIME" class="color LIME"></span></li>
<input type="hidden" name="_color" value="Green"></ul>
</div>
</div>
</div>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
body{margin-top:20px;}
._select_color{
font-size: 20px;
padding: 10px 12px;
font-weight: 300;
line-height: 28px;
border-radius: 4px;
border: 1px solid #ccc;
-webkit-appearance: none;
width: 100%;
height: auto;
box-shadow: none;
text-align: left;
background-image: none;
color: #796652;
background: white;
}
._select_color_drop {
margin: 0;
padding: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
top: 99%;
border-top: 0;
width: 100%;
}
._select_color_drop > li {
display: inline-block;
padding: 7px;
border-right: 1px solid rgba(192, 192, 192, 0.55);
cursor: pointer;
float: left;
}
._select_color_drop > li > .color,.btn > span.color{
width: 25px;
height: 25px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
_colors=$('._select_color_drop li');
for (var i = _colors.length - 1; i >= 0; i--) {
$(_colors[i]).click(function(){
var color_text = $(this).find('span').attr('_text_display');
var elemnt = $(this).closest('._select_color_drop').prev();
elemnt.find('span.color').remove();
$(this).find('span').clone().appendTo(elemnt);
var contents = $(elemnt).contents();
if (contents.length > 0) {
if (contents.get(0).nodeType == Node.TEXT_NODE) {
$(elemnt).html(color_text).append(contents.slice(1));
}
}
if($('[name=_color]').val() == undefined){
elemnt.next().append("<input type='hidden' name='_color' value='"+color_text+"'>");
}else{
$('[name=_color]').val(color_text);
}
})
};
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Rotating CSS Card
Fast Selection Date Picker
Bootstrap Icon Picker
Flat color progress bars

Questions / Comments: