JSFiddle - React, Tailwind, and code Playground

Bootstrap Color Picker Radio Options

by Jennifer Perrin

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<input type="radio" name="newColor" id="radioPrimary1" class="236b9b" value="#236b9b" />
<label for="radioPrimary1" class="radPrimary"><i class="fa fa-circle-o"></i> Primary</label>

<input type="radio" name="newColor" id="radioInfo1" class="4da0d7" value="#4da0d7" />
<label for="radioInfo1" class="radInfo"> <i class="fa fa-circle-o"></i> Info</label>

<input type="radio" name="newColor" id="radioSuccess1" class="77c123" value="#77c123" />
<label for="radioSuccess1" class="radSuccess"> <i class="fa fa-circle-o"></i> Success</label>

<input type="radio" name="newColor" id="radioWarning1" class="e5ad12" value="#e5ad12" />
<label for="radioWarning1" class="radWarning"> <i class="fa fa-circle-o"></i> Warning</label>

<input type="radio" name="newColor" id="radioDanger1" class="d64e18" value="#d64e18" />
<label for="radioDanger1" class="radDanger"> <i class="fa fa-circle-o"></i> Danger</label>

CSS

@import url(http://fonts.googleapis.com/css?family=Lato:300,400);
 body {
    padding: 10px;
    text-align: center;
    font-family:'Lato';
    font-weight: 400;
}

input[type="radio"] { display: none; }
    input[type="radio"] + label {
        -webkit-transition: all 300ms ease;
        transition: all 300ms ease;
        font-size: 16px;
        font-weight: 300;
        cursor: pointer;
        background-color: #efefef;
        color: #888888;
        padding: 4px 8px;
        display: inline-block;
    }
        input[type="radio"] + label i {
            color: #bdc3c7;
            margin-right: 6px;
        }
    input[type="radio"]:checked + label {
        -webkit-transition: all 300ms ease;
        transition: all 300ms ease;
        background-color: #236b9b;
        color: #ffffff;
    }
        input[type="radio"]:checked + label i {
            -webkit-animation: check 1s;
            animation: check 1s;
            color: #ffffff;
        }

input[type="radio"]:checked + label.radPrimary {
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
    background-color: #236b9b;
    color: #ffffff;
}
input[type="radio"]:checked + label.radInfo {
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
    background-color: #4da0d7;
    color: #ffffff;
}
input[type="radio"]:checked + label.radSuccess {
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
    background-color: #77c123;
    color: #ffffff;
}
input[type="radio"]:checked + label.radWarning {
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
    background-color: #e5ad12;
    color: #ffffff;
}
input[type="radio"]:checked + label.radDanger {
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
    background-color: #d64e18;
    color: #ffffff;
}

JavaScript

$(document).ready(function () {
    $("[name='newColor']").change(function () {
        if ($('.236b9b').is(':checked')) {
            $('.radPrimary i.fa').removeClass('fa-circle-o').addClass('fa-dot-circle-o');
        } else {
            $('.radPrimary i.fa').removeClass('fa-dot-circle-o').addClass('fa-circle-o');
        }
        if ($('.4da0d7').is(':checked')) {
            $('.radInfo i.fa').removeClass('fa-circle-o').addClass('fa-dot-circle-o');
        } else {
            $('.radInfo i.fa').removeClass('fa-dot-circle-o').addClass('fa-circle-o');
        }
        if ($('.77c123').is(':checked')) {
            $('.radSuccess i.fa').removeClass('fa-circle-o').addClass('fa-dot-circle-o');
        } else {
            $('.radSuccess i.fa').removeClass('fa-dot-circle-o').addClass('fa-circle-o');
        }
        if ($('.e5ad12').is(':checked')) {
            $('.radWarning i.fa').removeClass('fa-circle-o').addClass('fa-dot-circle-o');
        } else {
            $('.radWarning i.fa').removeClass('fa-dot-circle-o').addClass('fa-circle-o');
        }
        if ($('.d64e18').is(':checked')) {
            $('.radDanger i.fa').removeClass('fa-circle-o').addClass('fa-dot-circle-o');
        } else {
            $('.radDanger i.fa').removeClass('fa-dot-circle-o').addClass('fa-circle-o');
        }
    });
});