"CSS Color Changer"
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 ----------> <!DOCTYPE html> <html lang="en"> <head> <title>Support</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"> <!-- icons --> <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"> <!-- bootstrap --> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="default"> <!-- theme --> <link href="http://netdna.bootstrapcdn.com/bootswatch/3.1.0/bootstrap/bootstrap.min.css" rel="stylesheet" title="theme"> <style> body { font-family: sans-serif; font-size: 90%; color: #222; background-color: #fff; } h1 { font-weight: normal; } p { margin-top;100px; text-align: center; clear: both; width: 580px; margin: 0 auto 40px auto; background-size: auto; border: 1px solid #000000; border-radius: 4px; background-color: #eee; } code { font-size: 1.2em; padding: 1px 4px; background-color: #eee; } div.example { clear: both; height: 336px; width: 580px; margin: 0 auto 40px auto; background-size: auto; border: 5px solid #060; border-radius: 5px; } div.example.resize {background-size: 580px;} div.example.resizewh {background-size: 336px 580px;} div.example.width {background-size: 50% auto;} div.example.eight {background-size: auto 100%;} div.example.cover {background-size: cover;} div.example.contain {background-size: contain;} } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-12"> <nav class="navbar navbar-default" role="navigation" style="margin-bottom:25px;"> <div class="container-fluid"> <h4 class="navbar-text">CSS3 Style Change</h4> <div class="navbar-form navbar-right" id="getID" role="search"> <div class="input-group" > <span class="input-group-btn btn-block"> <button class="btn btn-default btn-dash dropdown-toggle" type="button" data-toggle="dropdown" id="button1" width="120px;"> <span class="icon-label">Search By</span> <span class="caret"></span> </button> <ul class="dropdown-menu pull-left" role="menu" width="120px;"> <li> <a href="" data-ID="#000000"><span class="icon-label"> black </span></a></li> <li> <a href="" data-ID="#00FF00"><span class="icon-label"> Red </span></a> </li> <li> <a href="" data-ID="#00FF00"><span class="icon-label"> green </span></a></li> <li> <a href="" data-ID="#0000FF"><span class="icon-label"> blue </span></a></li> <li> <a href="" data-ID="#00FFFF"><span class="icon-label"> cyan </span></a></li> <li> <a href="" data-ID="#FF00FF"><span class="icon-label"> purple </span></a></li> <li> <a href="" data-ID="#FFFF00"><span class="icon-label"> yellow </span></a></li> <li> <a href="" data-ID="#C0C0C0"><span class="icon-label"> gray </span></a></li> </ul> </span> </div> </div> </div> </nav> <br> <p class="info"> <strong class="css_code"> </strong><br> <code class="css_desc"> </code><br> </p> <div class="example"></div> </div> </div> </div> <script type="text/javascript"> $(function(){ $(".dropdown-menu li").click(function(){ var selectedText = $(this).find('a .icon-label').html(); var selectedID = $(this).find('a').attr('data-ID'); //alert(selectedText); // console.log(selectedID+" "+selectedText); console.log(selectedText); console.log(selectedID); //working version - for single button // //$('.btn:first-child').html(selText+'<span class="caret"></span>'); //working version - for multiple buttons // $(this).parents('.input-group-btn').find('.dropdown-toggle').html(selectedText+ '<span class="caret"></span>'); $(this).parents('.input-group-btn').find('.dropdown-toggle').html(selectedText+ '<span class="caret"></span>'); $(".example").css('background-color', selectedID); $(".css_code").html(selectedID); $(".css_desc").html(selectedText); $('div.container div.row div.col-md-12 div.example').css('background-color: '+selectedID); }); }); </script> </body> </html>

Related: See More

Datepicker
Flat color progress bars
Cool Alerts Alternate Color

Questions / Comments: